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

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

[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.

[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.