CSS Grids

[Serkan-devel]

There seems to have been a native implementation of grids in CSS for a while now.

The CONTRIBUTING-file referenced, that all files need to be used [might be including m-grid.css].
Would implementing native grids significantly enhance loading time if implemented?

[mosra]

Hi! :)

There seems to have been a native implementation of grids in CSS for a while now.

It seems so, yup. And it's quite widely supported, wow.

When I was looking into it the last time, it seemed that one needed to define the grid using that string in grid-template-areas, which put me off, because I thought the user always had to include a CSS code snippet in the markup to define custom subgrids, for example. But, now looking again, it seems far more flexible than that :)

The CONTRIBUTING-file referenced, that all files need to be used [might be including m-grid.css].
Would implementing native grids significantly enhance loading time if implemented?

Not sure what you mean, exactly. Yes, m-grid.css is the basic building block and next to the grid it also defines responsiveness for different screen sizes. Switching to CSS grids would cut away roughly 30% off it, I think -- not everything -- but that file is just a few lines in comparison to the rest, so it'll save maybe 1-2 kB in the final compressed size (which is now 9 kB). It'll help a bit, not significantly.

In any case, yes, I think going with CSS grids is a good idea in the long run. But at this very moment the current approach works well enough, there aren't any serious blocking bugs with it and I have other more pressing things to work on -- so I can look into this in maybe two, three months? In any case, if you want to try porting m.css to CSS grids yourself, pull request is welcome -- as long as the current grid functionality is 100% preserved and it doesn't result in any visual difference.

Keeping this open so it doesn't get forgotten :)

[Serkan-devel]

Could one also refactor it with both css-grids and flexbox? Flexbox is good for styling a row, while while on grids it's easier to style columns aswell

[mosra]

I would say the underlying implementation does not matter as long as you are easily able to do basic grid layouting in the content itself using plain CSS classes (as in, not requiring the content creator to add inline style attributes or whole <style> blocks to achieve the same as is now easily done by putting a bunch of .m-col-* classes on elements.

[mosra]

#117 might be another reason why jump on CSS grids / flex and drop all the old quirks.