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-column-gap and grid-row-gap selectors.
A 3 column layout is a a little trickier than 2 or 4 since it needs to collapse to 1 + 2 or 2 +1 at the intermediate break point before stacking all the elements vertically when viewed on phones.
At the tablet break point of 799px, the grid-template columns selector is set to "1fr 1fr". Column A occupies two columns and columns B & C are placed in grid row 2.
On mobile phones in portrait mode, the grid-template-columns selector is given a value of "1fr" and each column is given a grid-row position.
Note how all the elements maintain the same height even although the amount of content in each varies.
The links are positioned absolutely at the bottom and the containing element is given extra bottom padding to accomodate them. This keeps all the CTA (Call To Action) links in line across the row.
The CSS Grid Layout Module is ideal for creating column layouts since inline items automatically maintain equal height without the use of Javascript.
Columns can be different widths when viewed on wider screens. For example, the left and right columns can be treated as sidebars with a fixed width and the center column made responsive width. Add a header and footer to easily create the "Holy Grail" that web designers have lusted after for a long time and use increadibly complicated methods of doing it!