Here comes the CSS Grid Layout revolution

What Jen Simmons said was probably was one of the best news that the end of 2016 brought us: “The layout revolution begins in March

Until that moment, whenever we check Can I Use in order to check if it was possible to use GridLayout, we didn’t understand what was happening, Does it only works in IE/Edge? Impossible!

Grid Layout was presented by Microsoft and it’s available since their IE11, but it wasn’t until last September when it was presented as Candidate Recommendation in W3C.

So, what’s so new about Grid Layout? Absolutely everything! This new attribute for the display property will allow us to work with bidimensional grids, in contrast with Flexbox that only allows to handle elements in one direction. Grid Layout is complementary to Flexbox and vice versa, that’s why in next March web development as we know will be having some serious changes.

But do not despair! We could start working with Grid Layout and Chrome, go to chrome://flags enable the “Enable experimental Web Platform features” option.

GridLayout Basics

  • Display: Grid — As well as it happens with Flexbox , this property will be applied to the parent element of all the the other elements forming our grid. We could also use inline-grid, if we want an inline grid ,or subgrid, if we’re working with a nested grid inside another one and we want the latter to have the same size for its rows and columns as the ones of its parent.

Remember: Clear, Float and Vertical-Align properties will not be applied in elements with the GridLayout value.

  • Grid-template-columns and Grid-template-rows — Rows and columns size of our grid will be defined with these two properties. Size can be expressed in pixels, percentage or fr, a new measure unit that represents the space fraction available inside the grid. Inside these properties, we could name each row or column of our grid inside the property declaration:

grid-template-columns: [leftColumn] 150px [mainColumn] 500px [sideBar] auto;

If our grid has structural repetitions, we could use the repeat attribute in order to avoid value repetition:

grid-template-columns: repeat(4, 100px), 50px, 60;

4 would be that amount of times that the 100px column will be repeated.

  • Grid-column-start and Grid-column-end: These two allow us to define the beginning and the end of our grid columns individually. They can be used as one: grid-column.
  • Grid-row-start and Grid-row-end: These two allow us to define the beginning and the end of our grid rows individually. They can be used as one: grid-row.
  • Grid-column-gap and Grid-row-gap: These define the size of our grid lines meaning the distance between rows and columns. These two properties can be used together: grip-gap and it will always follow this order: grid-gap: <grid-column-gap> <grid-row-gap>.
  • Justify-items, Align-items, Justify-content and Align-content: These are properties that can be used as they are used with Flexbox.

With these basic principles, we could implement the Grid Layout specifications (remember to enable the “Enable experimental Web Platform features” option to see them.)

CSS Grid Layout along with Flexbox, the future of web development is already here.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.