It was once tables, then margins and floats, then flexbox and now grid: CSS always steered towards new and better ways to ease the age-old job of coding web layouts. The CSS Grid Layout Model can create and update the layout along two axes: horizontal and vertical, affecting both the width and height of elements.
Flexbox Patterns: The Ultimate CSS Flexbox Code Library
The newest CSS flexbox property has radically changed the way developers create interfaces. No more floats and CSS…Read more
The grid layout doesn’t depend on the position of elements in the markup, hence, you can shuffle the placements of elements in markup without altering the layout. In the grid model, a grid container element is divided into grid columns and rows (collectively known as grid tracks) by grid lines. Now let’s see how to create a sample grid.
As of writing this article, the CSS Grid Module is only supported by the latest IE browser and Edge . The CSS Grid is in experimental stage in the other major browsers in which you have to enable the support manually:
Firefox: Press Shift + F2, enter the following command into the GCLI input bar that appeared at the bottom of the browser: pref set layout.css.grid.enabled true.
Chrome: Browse the chrome://flags URL and enable Experimental Web Platform features.
All major browser support is likely to come by early/mid-2017.
In the CSS, the grid-template-areas property defines a grid with different grid areas. In its value, a string represents a grid row and every valid name within a string represents a column. To create an empty grid cell you need to use the dot (.) character within a row string.
The grid area names are to be referenced by the grid-area property of the individual grid items.
So this code creates a grid with three rows and columns. The top item occupies an area that spans over three columns in the first row and the bottom item spans over three columns in the last row. Each of the left, centre and right items takes one column in the middle row.
grid-template-areas: "top top top"
"left centre right"
"bottom bottom bottom";
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px auto 150px;
grid-gap: 5px 5px;
Below you can see that the grid-gap property added gaps between the grid items indeed.
Align grid content and items
The justify-content property of the grid container (.grid-container) aligns the content of the grid along the inline axis (horizontal axis) and the property align-content, aligns a grid’s content along the block axis (vertical axis). Both properties can have one of these values: start, end, center, space-between, space-around and space-evenly.
Where applicable, the track (row or column) size shrinks to fit the content when aligned. Take a look at the screenshots of grid contents aligned with different values below.
Both the justify-content and align-content properties align the entire content within a grid.
To align individual items within their grid areas, use the other pair of alignment properties: justify-items and align-items. Both can have one of these value: start, end, center, baseline (align items along the base grid line of the area) and stretch (items fill their entire area).