[Vuejs]-How can I make columns and rows equal size and length on Vue?

by

0👍

I would try this format:

<div id="app">
    <v-app>
        <v-main>
            <v-container class="grey lighten-5">
                <v-row no-gutters>
                    <v-col cols="4" sm="4">
                        <v-card class="pa-2" outlined tile>
                            resuiltsd
                        </v-card>
                    </v-col>
                </v-row>
                <v-row no-gutters>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                </v-row>
                <v-row no-gutters>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                </v-row>
                <v-row no-gutters>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                </v-row>
                <v-row no-gutters>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                </v-row>
                <v-row no-gutters>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                    <v-col cols="4" sm="1">
                        <v-card class="pa-2" outlined tile>
                            One of
                        </v-card>
                    </v-col>
                </v-row>

            </v-container>
        </v-main>
    </v-app>
</div>

0👍

Make sure that your app is wrapped inside v-app component and that your root element has an id app. This is often a reason for styling to not work.

If your provided code is inside the App.vue then try this-

<div id="app">
 <v-app>
  <div class="calculator">
    <v-container>
      <v-layout row>
        <div class="display">10</div>
        <v-flex>
          <v-btn class="btn">c</v-btn>
          <v-btn class="btn">+/-</v-btn>
          <v-btn class="btn">%</v-btn>
          <v-btn class="operator">÷</v-btn>
        </v-flex>
        <v-flex>
          <div></div>
          <v-btn class="btn">7</v-btn>
          <v-btn class="btn">8</v-btn>
          <v-btn class="btn">9</v-btn>
          <v-btn class="operator">x</v-btn>
        </v-flex>

        <v-flex>
          <div></div>
          <v-btn class="btn">4</v-btn>
          <v-btn class="btn">5</v-btn>
          <v-btn class="btn">6</v-btn>
          <v-btn class="operator">-</v-btn>
        </v-flex>

        <v-flex>
          <div></div>
          <v-btn class="btn">1</v-btn>
          <v-btn class="btn">2</v-btn>
          <v-btn class="btn">3</v-btn>
          <v-btn class="operator">+</v-btn>
        </v-flex>

        <v-flex>
          <div></div>
          <v-btn class="btn zero">0</v-btn>
          <v-btn class="btn">.</v-btn>
          <v-btn class="operator">=</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</v-app>
</div>

And if this code is inside any child component then make sure your App.vue is wrapped correctly.

App.vue

<div id="app">
  <v-app>
    <ChildComponent />
  </v-app>
</div>

Tip:-
If this works then you no longer needed custom styling to arrange your elements in a grid format. Vuetify will handle this using rows and column.

EDIT-

Use v-flex instead of v-col, as you are on Vuetify’s 1st version.

Leave a comment