Skip to content

Instantly share code, notes, and snippets.

@johnleider johnleider/grid.vue

Last active May 28, 2020
Embed
What would you like to do?
<template>
<div>
<!-- v-row now provides gutter adjustments and has 3 options available -->
<!-- v1.5 - <v-container grid-list-xl> to v2.0 - regular (nothing required) -->
<!-- v1.5 - <v-container grid-list-md> to v2.0 - <v-row dense> -->
<!-- v1.5 - <v-container> to v2.0 - <v-row no-gutters> -->
<!-- v1.5 -->
<v-container grid-list-xl>
<v-layout>
<v-flex>
<v-sheet class="pa-3">v-flex</v-sheet>
</v-flex>
<v-flex>
<v-sheet class="pa-3">v-flex</v-sheet>
</v-flex>
</v-layout>
</v-container>
<!-- v2.0 -->
<v-container>
<v-row>
<v-col>
<v-sheet class="pa-3">v-col</v-sheet>
</v-col>
<v-col>
<v-sheet class="pa-3">v-col</v-sheet>
</v-col>
</v-row>
</v-container>
<!-- v1.5 -->
<v-container grid-list-md>
<v-layout>
<v-flex>
<v-sheet class="pa-3">v-flex</v-sheet>
</v-flex>
<v-flex>
<v-sheet class="pa-3">v-flex</v-sheet>
</v-flex>
</v-layout>
</v-container>
<!-- v2.0 -->
<v-container>
<v-row dense>
<v-col>
<v-sheet class="pa-3">v-col</v-sheet>
</v-col>
<v-col>
<v-sheet class="pa-3">v-col</v-sheet>
</v-col>
</v-row>
</v-container>
<!-- v-row/v-col provides a default gutter while v-layout/v-flex does not -->
<!-- v1.5 -->
<v-container>
<v-layout>
<v-flex>
<v-sheet class="pa-3">v-flex</v-sheet>
</v-flex>
<v-flex>
<v-sheet class="pa-3">v-flex</v-sheet>
</v-flex>
</v-layout>
</v-container>
<!-- v2.0 -->
<v-container>
<v-row no-gutters>
<v-col>
<v-sheet class="pa-3">v-col</v-sheet>
</v-col>
<v-col>
<v-sheet class="pa-3">v-col</v-sheet>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row>
<v-col
cols="12"
md="6"
>
<v-sheet height="100">
<!-- v1.5 -->
<v-container fill-height>
<v-layout
align-center
justify-center
>
<v-flex shrink>
v-flex
</v-flex>
</v-layout>
</v-container>
</v-sheet>
</v-col>
<v-col
cols="12"
md="6"
>
<v-sheet height="100">
<!-- v2.0 -->
<v-container fill-height>
<v-row
align="center"
justify="center"
>
<v-col cols="auto">
v-col
</v-col>
</v-row>
</v-container>
</v-sheet>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row no-gutters>
<v-col
cols="12"
sm="8"
md="6"
lg="4"
xl="2"
>
<v-sheet class="pa-3">
v-flex
</v-sheet>
</v-col>
</v-row>
</v-container>
<!-- v1.5 -->
<v-container>
<v-layout>
<v-flex
xs12
sm8
md6
lg4
xl2
>
<v-sheet class="pa-3">
v-col
</v-sheet>
</v-flex>
</v-layout>
</v-container>
<v-container grid-list-xl>
<v-layout wrap>
<v-flex
xs12
md6
>
<v-layout>
<v-flex
xs12
md6
>
<v-sheet class="pa-3">
v-flex
</v-sheet>
</v-flex>
<v-flex
xs12
md6
>
<v-sheet class="pa-3">
v-flex
</v-sheet>
</v-flex>
</v-layout>
</v-flex>
<v-flex
xs12
md6
>
<v-sheet class="pa-3">
v-flex
</v-sheet>
</v-flex>
<v-flex xs12>
<v-layout>
<v-flex
xs12
md4
>
<v-layout>
<v-flex
xs12
md6
>
<v-sheet class="pa-3">
v-flex
</v-sheet>
</v-flex>
<v-flex
xs12
md6
>
<v-sheet class="pa-3">
v-flex
</v-sheet>
</v-flex>
</v-layout>
</v-flex>
<v-flex
xs12
md8
>
<v-layout>
<v-flex
xs12
md6
>
<v-sheet class="pa-3">
v-flex
</v-sheet>
</v-flex>
<v-flex
xs12
md6
>
<v-sheet class="pa-3">
v-flex
</v-sheet>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
<!-- v2.0 -->
<v-container>
<v-row>
<v-col
xs12
md6
>
<v-row class="ma-n3">
<v-col
xs12
md6
>
<v-sheet class="pa-3">
v-col
</v-sheet>
</v-col>
<v-col
xs12
md6
>
<v-sheet class="pa-3">
v-col
</v-sheet>
</v-col>
</v-row>
</v-col>
<v-col
xs12
md6
>
<v-sheet class="pa-3">
v-col
</v-sheet>
</v-col>
<v-col cols="12">
<v-row class="ma-n3">
<v-col
cols="12"
md="4"
>
<v-row class="ma-n3">
<v-col
cols="12"
md="6"
>
<v-sheet class="pa-3">
v-col
</v-sheet>
</v-col>
<v-col
cols="12"
md="6"
>
<v-sheet class="pa-3">
v-col
</v-sheet>
</v-col>
</v-row>
</v-col>
<v-col
cols="12"
md="8"
>
<v-row class="ma-n3">
<v-col
cols="12"
md="6"
>
<v-sheet class="pa-3">
v-col
</v-sheet>
</v-col>
<v-col
cols="12"
md="6"
>
<v-sheet class="pa-3">
v-col
</v-sheet>
</v-col>
</v-row>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
data: () => ({
//
}),
}
</script>
@ctwhome

This comment has been minimized.

@johnleider

This comment has been minimized.

Copy link
Owner Author

johnleider commented Sep 16, 2019

@darivs

This comment has been minimized.

Copy link

darivs commented Feb 19, 2020

What is the equivalent of v-flex grow in 2.0?

@johnleider

This comment has been minimized.

Copy link
Owner Author

johnleider commented Feb 19, 2020

v-col with the grow class

@darivs

This comment has been minimized.

Copy link

darivs commented Feb 20, 2020

I thought the same, but as long as v-col auto should be the equivalent to v-flex shrink, this:

<v-row align="center">
  <v-col auto>
    v-col auto
  </v-col>
  <v-col grow>
    v-col grow
  </v-col>
</v-row>

got a quite different behavior than this:

<v-layout class="align-center">
  <v-flex shrink>
    v-flex shrink
  </v-flex>
  <v-flex grow>
    v-flex grow
  </v-flex>
</v-layout>

And I would expect the behavior of the second one

@Anilkumar18

This comment has been minimized.

Copy link

Anilkumar18 commented May 28, 2020

What is the equivalent of
<v-layout row wrap> <v-flex xs12 sm6>

in 2.2 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.