Use CSS Grid Layout in grid system - discussion

[maya]

We've heard a few people ask us if the new grid system will incorporate CSS Grid Layout. So far, it will not -- it will be based on flexbox.

Our reasoning for just using flexbox:

The current grid (flexbox) goes in one, horizontal direction and relies on rows. It allows us to automatically fill space that's left over in rows. CSS grid lines things up in two directions (horizontal and vertical), which is beyond what we currently need.

See Jen Simmons describing Flexbox vs CSS Grid: https://www.youtube.com/watch?v=hs3piaN4b5I

However here are some of their reasoning:

I have been paying close attention (perhaps too close ?) to the work Rachel Andrews and others have been publishing via mozilla developer’s outlets, smashing news updates, and other outlets. CSS grid with a suitable flexbox fall back would enable a forward looking foundation for web layouts. The primary use case is improving the end user experience, with a secondary use case of helping to clean up the underlying mark up.

since it's (supposed to be supported in all browsers), it would like eliminate any if* statements. Also, I am just learning about it, but it's nice that empty divs that hold their width & height can be used and we don't have to write separately for mobile. I used to have issues with grids within grids ... but this new (7 month old) thing may be an interesting solution

[thisisdano]

Thanks for contributing to USWDS. Unfortunately, this issue is not on our current product roadmap.

[stphnwlkr]

Having attended An Event Apart and seeing the power of CSS Grid as well as learning that Internet Explorer supports almost everything, I think this should be reopened and implemented as the primary grid to minimize the need to redo and relearn the grid system is a few months.

[maya]

When I tried to see if we could do this, I got hung up on how to recreate the variable width and auto-fill example shown here in CSS Grid: https://v2.designsystem.digital.gov/utilities/layout-grid/#auto-layout-columns Are you able to do this? When I looked into this, it seemed like the answer was no, and that's what flexbox was for.

[stphnwlkr]

I think that is sort of inherent to the grid using minmax(). In some ways, it is a bit of a paradigm shift. There are definite uses for flexbox and multicolumn but none exclude using the other. I should have added that if all you need is a row to do something then display:flex might be the better choice (like a navbar).

[joshbruce]

Would definitely help me out as I started using CSS Grid and therefore no longer use the grid from the USWDS.