CSS grid layoutNetwork Media / Class 5

CSS Grid Layout Specification W3C Consortium

caniuse.com

caniuse.com

😭😭😭😭😭

😭😭

CSS grid layout terminologyNetwork Media / Class 5

<div class="container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </div>

.container { display: grid; }

The grid container is the enclosing element containing all items in the grid & has display: grid; applied in its CSS.

<div class="container"> <div class="item item-1”> <p>This paragraph isn’t a grid item, but is nested in one. </p> </div> <div class="item item-2"></div> <div class="item item-3"></div> </div>

The grid items are nested one level below the grid container. They can be styled with grid layout CSS to set their position.

A grid line helps to define the dividing structure of the grid.

A grid track sits between two adjacent grid lines; it can be a row or column.

A grid cell sits between a pair of adjacent grid lines for columns and another adjacent pair of grid lines for rows.

A grid area is the total space surrounded by four grid lines.

Defining the gridSetting up the container

.wrapper { display: grid; grid-template-columns: 400px 400px 400px; grid-template-rows: 200px; }

A three-column grid with 400x200 pixel grid cells.

.wrapper { display: grid; grid-template-columns: 400px 400px 400px; grid-template-rows: 200px; grid-gap: 20px; }

grid-gap defines the amount of space between rows and columns.

.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px; grid-gap: 20px; }

Grid sizes can be specified as fractions, defining the proportion of space taken up by a track.

.wrapper { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 200px; grid-gap: 20px; }

In this case, a 2-column grid where one column is 1/3 the available width and the other is 2/3 the available width.

.wrapper { display: grid; grid-template-columns: 1fr 50px 1fr 1fr; grid-template-rows: 200px; grid-gap: 20px; }

Absolute and fraction values can be mixed. The space for fixed size tracks is allocated first; remaining space is split.

Formatting the grid itemsSetting their size and location

.grid-item { grid-column-start: 2; grid-column-end: 4; }

grid-column-start, grid-column-end, grid-row-start, and grid-row-end can be used to place the element in a specific cell.

.grid-item { grid-column: 2 / 4; /* same as: * grid-column-start: 2; * grid-column-end: 4; */ }

grid-column and grid-row can be used as shorthand, separating the start and end with a slash /

.grid-item { grid-column: 2 / span 2; /* same as: * grid-column-start: 2; * grid-column-end: 4; */ }

grid-column-end and grid-row-end can be calculated relative to the item’s start, with the span value.

.grid-item { width: 100px; height: 100px; align-self: center; justify-self: center; }

By default, grid items will expand to fill the available area unless they have a fixed size. Use align-self to control top/bottom alignment and justify-self to control lef/right.

Resources

• https://gridbyexample.com/

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

• https://css-tricks.com/snippets/css/complete-guide-grid/

See code examples.