CSS Grid Layout

Since the early days of the web, designers have been trying to lay out web pages using grid systems. Likewise, almost every CSS framework attempts to implement some kind of grid system, using floats and often leaning on preprocessors.

The CSS Grid Layout module brings us a native CSS Grid system for the first time—a grid system that does not rely on document source order, and can create complex layouts which are easily redefined with media queries. Following along with practical examples, you’ll learn how Grid works, and how it can be used to implement modern layouts and responsive designs.

While CSS has evolved to help us create complex ways to present content, layout has lagged behind.

Tools we use for layout like floats and inline blocks were meant for document-based layout, not the complex web pages we design now.

Flexbox, CSS Grid Layout and Box Alignment offer hope for better layout management.

BASIC USE OF CSS GRID LAYOUT

display: grid and display: inline-grid create a grid when applied to a container. All the container’s child elements then become grid items.

grid-template-columns and grid-template-rows define the tracks in your grid, the space taken up by items.

grid-gap (shorthand for grid-column-gap and grid-row-gap) defines the space between tracks.

fr is the fraction unit, which represents a fraction of the available space in the container – any tracks with a fraction unit share the space equally.

Fraction units can be mixed with other length units such as pixels to make one column a fixed width and its neighbours sharing the remaining space.

repeat() syntax provides a shorthand way of creating repeating patterns of tracks.

 

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(3,1fr);

grid-auto-rows: 200px;

}

 

Implicit tracks are undeclared tracks created by the existence of explicit tracks (for example, explicitly declared columns will define auto-sized implicit rows).

grid-auto-rows and grid-auto-columns can define the size of implicitly created tracks.

The auto-fill keyword defines the size of tracks to be repeated within an available space.  

The minmax() function defines the minimum and maximum size of tracks to be repeated within an available space.

 

.container {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(200px,1fr));

grid-gap: 20px;

}

 

A grid track is the space between two grid lines, horizontal or vertical.

A grid cell is the space between four surrounding grid Lines – like a table cell.

A grid area is any area of the grid bound by four grid lines – a group of Cells.

grid-column (shorthand for grid-column-start and grid-column-end)

grid-row (shorthand for grid-row-start and grid-column-end)

grid-area (shorthand for grid-column and grid-row)

.container-child {

grid-column-start: 2;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 3;

}

 

becomes

 

.container-child {

grid-column: 2 / 4;

grid-row: 1 / 3;

}

 

becomes

 

.container-child {

grid-area: 1 / 2 / 3 / 4;

}

Grid lines are numbered but may be named, which can make them more meaningful.

 

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: [side-start] 1fr

[main-start] 1fr fr

[main-end]

grid-template-rows: [main-start] 200px 200px

[main-end];

}

 

.container-child {

grid-column: main-start / main-end;

grid-row: main-start / main-end;

}

 

Anything named *-start and *-end will between them create an implicitly named area, which can be used for positioning.

 

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: [side-start] 1fr

[main-start] 1fr fr

[main-end]

grid-template-rows: [main-start] 200px 200px

[main-end];

}

 

.container-child {

grid-area: main;

}

 

There is much magic in this spec. It is a huge, huge spec.

All of this grid stuff is not live in browsers yet, it is behind a browser flag.

While grid seems very table-like, unlike tables the content doesn’t need to follow source order and grids can be responsive.