[Feature Request] Add display helper classes for CSS grid

[aentwist]

Problem to solve

This would allow for easy management of CSS grid in simple cases. Instead of having to write CSS, the helper classes could be used instead.

Proposed solution

I propose that CSS helper classes are added, when applicable. For example,

.d-grid {
  display: grid;
}

.place-content-center {
  place-content: center;
}

A notable limitation of this idea is complex grid setups that use properties such as grid-template. These setups would still require writing CSS. Given the many possibilities of CSS grid, whether enough cases could be covered to justify adding this is up for debate. It depends in part on whether some classes are included with common values, much like flex-grow-1. The common values are also up for debate.

This solution is similar to the other display helpers, and in particular the flexbox ones.

[andrejsharapov]

1. I am using css grid with vuetify: https://github.com/andrejsharapov/vuetify-css-extensions
2. how to use

Hope this helps you :)

[aentwist]

This issue is about making this functionality available in Vuetify, built-in. If it is deemed appropriate then it should be added; otherwise, the extension idea is a solution. Until there is further comment on this I will not consider the extension a resolution.

The extension does point out something I totally missed though - inline-grid.

[andrejsharapov]

https://github.com/vuetifyjs/vuetify/issues/6117#issuecomment-453525522 the grid css will not be added to the current version. At the expense of 3 I can't say, but I think they don’t plan to

[aentwist]

This is not about a component implementation (as in #6117?), but simple CSS helper classes.

[aentwist]

Some time has passed, and my opinion has shifted. Vuetify should drop all its CSS and leave it to Tailwind CSS, which is more featured. Focus on the scope: the best component library for Vue. MUI makes the same mistake, trying to do their own descriptive CSS thing, except it is far, far worse than either Tailwind or Vuetify. And now Tailwind tries to make components, which it should also not even attempt. Use the best tool for the job and save yourselves bandwidth to devote to more impactful (in this case, component) work. The Vue community has immeasurable appreciation for it.

Rant over :)

https://tailwindcss.com/docs/display