CSS grid layout -...
24
CSS grid layout Network Media / Class 5
Transcript of CSS grid layout -...
CSS grid layoutNetwork Media / Class 5
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.
