Vuetify: [Documentation] New vuetify grid is a unclear - migration examples or comparesion

[gotenxds]

Problem to solve

Currently it is unclear how is the new row and col componenets work in realtion to a normal flexbox, layout was a bit more straight forward, it was just a flexbox, right now I cant even guess how am I suppose to use a direction-column Am I to just use multiple v-rows ? am I missing a prop ?

Proposed solution

A migration guide/comparsion to v-layout v-flex/ compression to flexbox

[michaelscheurer]

This definitely needs to get priority. We are also in the process of migrating from 1.5 to 2.x. But this is almost impossible as long as there is such a basic gap in the documentation. Please, please prioritize. We've been waiting for this for days.

[zulrang]

Half of the examples in documentation don't even work. See: https://vuetifyjs.com/en/components/grids#row-and-column-breakpoints

[MajesticPotatoe]

Do you have any other suggestions on best ways to improve or add clarity? Doesn't really seem that they are 1:1 but just borrows some of their functionalities combined with bootstrap inspiration. Not sure about the direction-column ordeal, my best guess would be to use multiple v-rows. thoughts @KaelWD ?

• Looking at just the usage alone it seems pretty indepth (including links to additional resources to bootstrap and the css flexbox guide)
• AFAIK, there is little in terms of a migration guide as they are more or less to be considered completely different grid systems (v2 being inspired by bootstrap-which is mentioned, v1 being more homegrown)
• One thing worth adding would be information on the eslint plugin and maybe a reference to the 1.5 documentation noting v-layout -> v-row and v-flex -> v-col

[gotenxds]

I think a brief explnation about how does the v-col and v-row transfer into the flex-box world, Flexbox is a clear and web wide standard of working with layouts, bootstrap is only used by, well bootstrap.
As a vuetify user I shouldn't need to go and search the web for bootstrap to flexbox guides, I'm not working with bootstrap, honestly one of the reasons my team and I decided to go with vuetify was the lack of bootstrap related stuff... but ho well... that's where we are and there is no changing stuff now, at least make the usage clear for people who come from a normal flexbox, again, a web wide standard.

Also saying that v-layout => v-row and v-flex => v-col is incorrect and misleading.
I wish it was that simple.

For now what I found is that you cant use flex direction at all, which is a shame as you cant use v-row and v-col for dynamic views that need to change.

Right now, the best thing I found was to just use plain old css with flexbox. Or if you're brave, use the component component and change the :is on demand.
Both of which is a downgrade, if there is a better way I would love to hear about it.

[AyushiBShah]

@KaelWD : can you please help us how to migrate from v-layout and v-flex to new grid?
CC: @MajesticPotatoe

[throrin19]

Same problem here, The v-layout/v-flext to new grid system is a shame for my team and my project.

All responsive examples does not works at this time and we need them to understand the new grid system and migrate to this.

Our site is fully responsive in vuetify 1.5 and we want to continue in vuetify 2.

But we have so many components to upgrade (and so many forms in our case).
It's very bad to change this core part of vuetify.

[douglasg14b]

100% on this. The migration guide barely touches on it, and makes no mention of the parallels between the new v-col & v-row and the old v-layout and v-flex....

And why they are not completely interchangeable, they exhibit different behaviors that break UIs if they are switched directly.

A hint to maintainers:

The migration guide was written from the perspective of someone knowledge about Vuetify internals, a Vuetify expert for both 1.x and 2.x. It was not written from the perspective of users who are not experts on the granular details of Vuetify internals.

The 2.x docs are far less clear than the 1.x docs on the grid system. Examples that don't have regular HTML with property bindings, but are instead generated require the user to try and parse what the example is SUPPOSED to look like AFTER it's been rendered. It's a very user-unfriendly way to show examples.

[MajesticPotatoe]

There is no migration guide for the grid - thus why this issue is here. the docs for 2.x and 1.x grids contain just as much information. the only real addition was a small section related to the individual parts. Other than that its the same format. Most of the migration itself is handled by the eslint plugin.

Unfortunately I have yet to touch the 2.x grids and know little about it which is why this hasn't progressed.

[johnleider]

Loud and clear. Will resolve today.

[b-strauss]

In version 1.5 it was possible to set a column attribute on v-layout to change the flex-direction to column. The version 2 docs don't mention the flex-direction at all. Furthermore v-layout is now called v-row. Is it even possible to change the flex-direction anymore?

[morficus]

@b-strauss take a look at the Grid System page in v2.x. If you change API explorer to v-row you should see props for controlling various flex things. You can also take a peak at the code behind the horizontal alignment example

[MajesticPotatoe]

@b-strauss Additionally there is also a whole section on flex and flex direction

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.