[Vuejs]-Vuetify.js Grid | v-row keep exceeding mobile viewport width

by

4👍

✅

The v-row component is not designed to contain your content directly. Inside v-row, each section of your content should be wrapped in a v-col component, like this:

<template>
  <div id="app" class="back">
    <v-container fluid>
        <v-row >
          <v-col cols="12"> <!-- You can change the COLS attribute to make columns display side-by-side -->
            <br><br><br><br>asdf
          </v-col>
        </v-row>
    </v-container>
  </div>
</template>

You can read more about Vuetify’s grid system here.

EDIT:

Also, you should not use v-layout and v-row in combination. v-layout is for Vuetify 1.x. v-row is for Vuetify 2.x. If you use v-layout, its child component should be v-flex instead of v-col.

👤Jason Smith

Leave a comment