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.
A 4 column layout is quite straight forward in that each column is one fractional unit wide and it switches to 2 + 2 at the intermediate break point and then stacking all the elements vertically when viewed on phones in portrait mode.
At the tablet break point of 1059px or 799px, columns A & B are placed in grid-row:1 and columns C & D in grid-row:2.
At the mobile phone break point of 599px, the grid-columns-template property is set to 1 fractional unit and each column is given a different row number.
This allows the columns to be full width and to stack vertically with their order in the stack being determined by the row number.
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.
Each column has selectable options for adding an image with alt text, a heading, text and a CTA style link tab. In other words, they can each have their own mix of content type.
The links can be configured to open internal or external pages and in a window if required.
Break Point
The break point at which the layout changes from four inline to two pairs one above the other can be either 1059px so that switch takes place on iPads in landscape mode or 799px for portrait mode.
Header
The header on this page was created using the CSS grid layout to show how fairlt complex layouts can be put together and function at different browser/device window widths. If viewing this page on a computer, reduce the browser width to see how the layout changes.