CSS Grid was finalized in the spring of 2017 and was available within a month on most browsers.

Where Flexbox is for only one dimension, either horizontal or vertical, grid is for two dimensional layouts, both horizontal and vertical.

CSS Grid and Flexbox are changing layout. It will take a while for the changes to settle in and for best practices to arise. Play around with ready made interactive examples. You will be required to create layouts using CSS grid and flex.

There are many resources to better understand how css grids work.

Mozilla Grids article is a great place to start.

Rachel Andrew’s Grid by Example / Patterns is good too. She is a CSS grid ambassador and has various layouts prepared on CodePen. You can use them to start your layout.

Smashing Magazine ran a CSS Grid contest and came up with some great examples. The demonstration has lots of cutting edge CSS features in addition to using grid. For other examples using CSS grid, check out this restaurant menu or a modern blog . Looking through the code will provide you with ideas on how to implement your own CSS grid.

In the FireFox browser use the Inspect Element on the grid item and click on the grid features for visual aids in understanding how the grid is implemented. The other browsers have not followed, open up inspector and click to activate.

Occupy only the cells of the grid you want to fill. Create white-space! Designers Rejoice!

Grid introduces the fr unit which stands for fraction of available space.

Jen Simmons, a designer advocate at Mozilla is a great resource, with examples and explanatory videos.

CSS Tricks has a complete guide to CSS grid. It is well organized and clearly explained. It also has an interesting article: Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries. A fully responsive hexagon grid made without media queries, JavaScript, or a ton of hacky CSS.

See the Pen
Responsive hexagon grid by Temani Afif (@t_afif)
on CodePen.

Multiple nested grids menu example does not need media queries Download code.

CSS Grid Cheat Sheet reference is helpful to visually select the grid properties you want to use.

CSS Grid

basic concepts

• The grid lines that define the grid: they can be horizontal or vertical, and they are numbered starting at 1.
• The grid tracks, which are the rows (horizontal) or columns (vertical) defined in the grid.
• The grid cells, the intersection of a row and a column.
• A grid area, one or more adjacent grid cells that define a rectangle.

CSS grid defines the behavior of the children of a parent block display: grid; or inline-block display: inline-grid; element. The parent element is intersected by invisible horizontal and vertical grid lines that form potential Grid Cells. Grid Tracts are spans that cover horizontal rows or vertical columns. Grid Areas are conjoined Grid Cells. Grid Gaps create space around grid lines. grid-gap: 50px 100px; is shorthand for 50 pixel column gap and 100px row gap.

By default the grid lines are named from 1 to whatever both down and up. Negative numbers designate the order in reverse, starting from the far sides and counting back toward the near side (negative numbers are not shown in the figure above).

Grid definitions position the content in Grid Child items on the grid. The grid is a flexible layout system designed to automatically fill out the space. It works in conjunction with flexbox in adapting layouts to available space.

Defining The Grid: Intrinsic or Extrinsic

The grid is intrinsic if you let the machine define the grid. Extrinsic grids are defined through CSS. Intrinsic grids automatically determine the content. Extrinsic grids determine the grid first, and then allows one to specify where the content goes through column and row properties. The following from the spec is an example of an extrinsic grid with four named areas: H, A, B, and F. The first column is sized to fit its contents (auto), and the second column takes up the remaining space (1fr). Rows default to auto (content-based) sizing; the last row is given a fixed size of 30px.