[Feature Request] Grid system complicated

Problem to solve

I love Vuetify, but if I had to point one pain point, that would be the Grid system.

I think the grid system is overly complicated and unclear. The only way to align is by using v-row. The only way to space items is by using v-col. That works pretty well, up to the point where using vertical layout. Where we usually end up with:

<v-col>
  <v-row>
    <v-col></v-col>
  </v-row>
  <v-row>
    <v-col></v-col>
  </v-row>
</v-col>

This is also a problem to use a <v-spacer> vertically, which I recently learned to fix using: <v-row class="flex-column">.

Proposed solution

I recently had to use Material-UI with React. I do not like Material-UI, but if there is one thing they make easy, it’s the Grid system. By allowing to make a container horizontal(default) or vertical: <Grid container direction="column">. And even allow a container to be an item (a col to be a row), which prevents adding extra v-row/v-col tags or add flex classes just to get access to alignments and/or spacing: <Grid container item>

<Grid container direction="column">
  <Grid container item></Grid>
  <Grid container item></Grid>
</Grid>

I wish Vuetify had that. ❤️

[oliviertassinari]

I recently had to use Material-UI with React. I do not like

@Elfayer Anything we could improve in Material-UI to make it enjoyable? 🙌 (sorry for hijacking the thread a bit)

[johnleider]

This Issue is being closed due to inactivity.

If you have any questions, please reach out to us in our Discord community.