CSS Grid Layout Module
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design responsive web pages without having to use floats and positioning.
An HTML element becomes a grid container by setting the display property to grid or inline-grid.
A grid layout consists of a parent element, with one or more child elements.
Items can be layed out in columns and rows and spaced out using the grid-gap selector. The grid-column-gap and grid-row-gap selectors can be used for more control of the item spacing.
Why Use It?
One of the main benefits of using the grid layout module is that the items in any row will maintain the same height despite have varying amounts of content. Normally this would require the use of Javascript and extra styles.
Items can be easily positioned vertically using the "align-self" property. This can be set to start, center, end or auto.
The number of items per row is set simply by entering the number of columns. These are changed for each device type using media queries.
Overall, the CSS Grid Layout can create complex responsive layouts with minimal code, no Javascript and greater efficiency then any other method.
Can I Use It?
As of October 2017, Chrome, Firefox, Safari and Edge all support CSS Grid. Internet Explorer is now redundant and will never support modern practices. IE Edge supports grid from V 16.