Help with spacing rows



  • Current State
    Desired State

    This is my current code:

    <q-page padding class="row items-center">
    <div class="col-12">
    
        <div class="row justify-center">
    
          <div class="col-6">
            <q-input class="q-ma-sm" dark v-model="text" label="Username or Email" />
            <q-input class="q-ma-sm" dark v-model="text" type = "password" label="Password" />
            <q-btn class="q-ma-sm" color = "secondary" label="Log In" />
          </div>
    
        </div>
        <q-space></q-space>
        <hr>
    
        <div class="row justify-center">
    
          <div class="col-6">
    
            <div class="row justify-center">
    
              <div class="col-12">
                <q-input class="q-ma-sm" dark v-model="text" label="Display Name" />
                <q-btn class="q-ma-sm" color = "secondary" label="Create Game" />
              </div>
    
            </div>
    
            
    
            <div class="row justify-center">
    
              <div class="col-12">
    
                <div class="row">
                  <q-btn class="q-ma-sm" color = "secondary" label="Join Using ID" />
                  <q-btn class="q-ma-sm" color = "secondary" label="Join Random" />
                </div>
                
              </div>
    
            </div>
    
          </div>
    
        </div>
    
      </div>
    </q-page>
    
    

    I tried using q-gutter but it doesn’t seem to be working. Is there a quasar way to do this or is my only option to override the CSS and manually set a large margin?

    Any help would be appreciated!



    • remove <q-space></q-space> because it does nothing in your case (it is only for horizontal gaps, I think)
    • add the class q-gutter-y-xl to the div in line 2

    Explanation:
    That div contains three elements (two divs and the <hr>) which you want to space out. Whenever you want to add equal spacing between all elements, using a q-gutter class on the container does the trick (except when working with cols, then it’s q-col-gutter, see https://quasar.dev/layout/grid/gutter).

    (Alternatively, you could manually add margins to your rows or the separator, for example q-my-xl on the <hr> or the divs, but the gutter method is better)

    Also, consider replacing <hr> with <q-separator />.


Log in to reply