How to specify Maximum equal columns number in a Flex Row

[mecjos]

Hi. I want to add equal specified number of columns in a flex row… I couldn’t find in documentation. How can I do it without ruinin predefined classes. My code is below… Thank you.

          <q-tab-panel v-for="(tab, index) in pageContent" :name="index">
            <div class="row q-gutter-md">
              <div class="col">
                <q-list>
                  <q-toolbar class="bg-primary text-white shadow-2">
                    <q-toolbar-title></q-toolbar-title>
                  </q-toolbar>
                </q-list>
              </div>
              <div class="col">
                <q-list>
                  <q-toolbar class="bg-primary text-white shadow-2">
                    <q-toolbar-title></q-toolbar-title>
                  </q-toolbar>
                </q-list>
              </div>
              <div class="col">
                <q-list>
                  <q-toolbar class="bg-primary text-white shadow-2">
                    <q-toolbar-title></q-toolbar-title>
                  </q-toolbar>
                </q-list>
              </div>
              <div class="col">
                <q-list>
                  <q-toolbar class="bg-primary text-white shadow-2">
                    <q-toolbar-title></q-toolbar-title>
                  </q-toolbar>
                </q-list>
              </div>
            </div>
          </q-tab-panel>

[mecjos]

Fixed…

q-col-gutter-* adds equal spacing.

            <div class="row q-col-gutter-md">
              <div class="col-4">
                <q-list>
                  <q-toolbar class="bg-primary text-white shadow-2">
                    <q-toolbar-title></q-toolbar-title>
                  </q-toolbar>
                </q-list>
              </div>
              <div class="col-4">
                <q-list>
                  <q-toolbar class="bg-primary text-white shadow-2">
                    <q-toolbar-title></q-toolbar-title>
                  </q-toolbar>
                </q-list>
              </div>
              <div class="col-4">
                <q-list>
                  <q-toolbar class="bg-primary text-white shadow-2">
                    <q-toolbar-title></q-toolbar-title>
                  </q-toolbar>
                </q-list>
              </div>
              <div class="col-4">
                <q-list>
                  <q-toolbar class="bg-primary text-white shadow-2">
                    <q-toolbar-title></q-toolbar-title>
                  </q-toolbar>
                </q-list>
              </div>
            </div>