CODEWITHSUNDEEP
vuetify.js
Roel
Roel

Reputation: 349

Vuetify: grid layout with five columns

Vuetify uses a 12-point grid system. Since 12 is not divisible by 5, how does one create a grid with 5 columns of the same width? The 5 columns should take all available space.

What's the most "correct" way to do this?

EDIT: I tried to implement John M's comment, but it doesn't fill up all the available horizontal space:

<v-container>
  <v-card color="red">
    <v-layout wrap align-content-space-around text-xs-center>
      <v-flex xs1></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
      <v-flex xs1></v-flex>
    </v-layout>
  </v-card>
</v-container>

I want the red areas to be gone: enter image description here

Upvotes: 7

Views: 19017

Answers (5)

BennKingy
BennKingy

Reputation: 1593

Flex space between should fix that.

Upvotes: 0

Anastasia
Anastasia

Reputation: 1

Instead of specifying the cols number <v-col cols="12"> write xl="auto"

<v-col xl="auto">

Upvotes: 0

Akash NO
Akash NO

Reputation: 316

What i needed was 5 column grid after medium display size i wrote a inline style with a breakpoint condition

  <v-row>
    <v-col v-for="n in 10"
         :style="$vuetify.breakpoint.mdAndUp ? ' flex: 1 0 18%;' : ''"
         cols="6"
         sm="3" >
         {{items inside each column}}
    </v-col>
  </v-row>

Upvotes: 2

rekam
rekam

Reputation: 1121

I needed a five columns layout too, and I found something that's working for me. I needed the five columns layout for lg screens, so I added these rules in my css:

https://codepen.io/rekam/pen/JmNPPx

/* vuetify lg min breakpoint: 1280 - 16     = 1264px */
/* vuetify lg max breakpoint: 1920 - 16 - 1 = 1903px */

@media (min-width: 1264px) and (max-width: 1903px) {
    .flex.lg5-custom {
        width: 20%;
        max-width: 20%;
        flex-basis: 20%;
    }
}

You need to specify min and max in media query, because of you don't, the 20% rule will apply for all sizes. And simply use it in your template like this:

<!-- md4 is just here as an example -->
<v-layout row wrap>
    <v-flex md4 class="lg5-custom">box 1</v-flex>
    <v-flex md4 class="lg5-custom">box 2</v-flex>
    <v-flex md4 class="lg5-custom">box 3</v-flex>
    <v-flex md4 class="lg5-custom">box 4</v-flex>
    <v-flex md4 class="lg5-custom">box 5</v-flex>
    <v-flex md4 class="lg5-custom">box 6</v-flex>
    <v-flex md4 class="lg5-custom">box 7</v-flex>
</v-layout>

Upvotes: 9

Robert Reilley
Robert Reilley

Reputation: 95

Does the content have to be in a card component? I'm asking because it wasn't specified in your question. If it isn't, you can accomplish this by removing the card component and replacing/adding some props to your container and layout components.

<div id="app">
  <v-container align-center text-xs-center>
    <v-layout justify-center>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
      <v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
    </v-layout>
  </v-container>
</div>

Upvotes: 0

Related Questions