How to specify Maximum equal columns number in a Flex Row



  • 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>
    


  • 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>
    

Log in to reply