Menu
I'm trying to create a grid layout but am having trouble.
The layout I'm trying to create is attached in the image below. It's easier to show than explain.
Using the vuetify grid layout system, i've tried to get it but can't get it to nicely fill out all the space. My code is below.
Is there a nice way to create this grid layout?
<v-container fluid grid-list-md box>
<v-layout row>
<v-flex d-flex xs3>
<v-layout row wrap>
<v-card color="orange lighten-2" tile flat>
<v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
</v-card>
<v-divider></v-divider>
<v-card color="orange lighten-2" tile flat>
<v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
</v-card>
<v-divider></v-divider>
<v-card color="orange lighten-2" tile flat>
<v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
</v-card>
<v-divider></v-divider>
<v-card color="orange lighten-2" tile flat>
<v-card-text>{{ lorem.slice(0, 90) }}</v-card-text>
</v-card>
</v-layout>
</v-flex>
<v-flex d-flex xs9>
<v-layout row wrap>
<v-layout row>
<v-flex d-flex>
<v-card color="blue-grey" dark tile flat>
<v-card-text>{{ lorem }}</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex>
<v-card color="blue-grey" dark tile flat>
<v-card-text>{{ lorem }}</v-card-text>
</v-card>
</v-flex>
</v-layout>
<v-layout row>
<v-flex d-flex xs9>
<v-card color="blue-grey" dark tile flat>
<v-card-text>{{ lorem }}</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-layout>
</v-flex>
</v-layout>
</v-container>
655
The v-spacer component is useful when you want to fill available space or make space between two components.
Vuetify's grid system is made up of a 12 point system, meaning that each row in your grid is split equally into a maximum of 12 columns. Each row inside <v-container> is delineated with <v-row> (or <v-layout row> in v1. x) tags. By default, space is maintained between all the columns, i.e. 24px to be exact.
Flexbox layouts allow responsive items inside a container to be automatically arranged depending on the screen size. Vuetify comes with various flexbox utility classes for controlling the layout of flex containers with alignment, justification, wrapping, and more.
The Vuetify grid is heavily inspired by the Bootstrap grid. It is integrated by using a series of containers, rows, and columns to layout and align content. If you are new to flexbox, Read the CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
Grid system. Vuetify comes with a 12 point grid system built using flex-box. The grid is used to create specific layouts within an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lgand xl.
Grid system Vuetify comes with a 12 point grid system built using flexbox. The grid is used to create specific layouts within an application’s content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lg and xl.
When Vue mounts to the DOM, any Vuetify component that is part of the layout registers its current height and/or width with the framework core. The v-main component then takes these values and adjusts its container size. To better illustrate this, let’s create a basic Vuetify layout:
You can achieve that format by using the fill-height prop and the breakpoints. Having <v-layout row wrap> will force the larger box with xs12 to take up the entire next row, so you don't have to create it's own layout.
<v-layout row wrap>
<v-flex d-flex xs6>
<v-card color="blue-grey" dark tile flat>
<v-card-text>{{ lorem }}</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex xs6>
<v-card color="blue-grey" dark tile flat>
<v-card-text>{{ lorem + lorem }}</v-card-text>
</v-card>
</v-flex>
<v-flex fill-height d-flex xs12>
<v-card color="blue-grey" dark tile flat>
<v-card-text>{{ lorem + lorem + lorem}}</v-card-text>
</v-card>
</v-flex>
</v-layout>
Here is a codepen that shows it in action.
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
