Introduction
CSS3 Grid Layout is great for controlling layout with rows AND columns!
1. Create the structure of the layout (i.e. # of rows and columns)
2. Place items on the layout (manually or through auto placement)
Forge on
Getting started
- Placing items on a grid: “display:grid”
Setting grid columns and rows:
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
Note
1.Grid-template-columns and rows help define grid-tracks which is the space between 2 lines on the 2 dimensional grid.
2.Fr: fr is a new unit, that stands for fraction. So we are using 1/4 fractions of the available space for each column.
Setting auto grid rows/columns
You can explicitly state how many columns and row you want with grid-template-col/row or you can use implicit number of rows/cols with auto
/* create as many rows as needed that are 100px in height*/
grid-auto-rows: 100px;
minmax function
This is a built-in function takes in 2 parameters. The first that lets you specify the minimum ‘px’ and the second that lets you specify the maximum (for example a maximum of auto). For example:
grid-auto-rows: minmax(100px, auto);
Positioning items
When you position items on a grid, you target lines instead of tracks.
grid-column-start, grid-column-end, grid-row-start and grid-row-end
Grid Areas
When grid cells span multiple cols or rows, it is called a grid area
Grid Gutters
You can create space between cols and rows with grid-column-gap and grid-row-gap used on the main grid container, for example:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(50,auto);
grid-column-gap: 20px;
grid-row-gap: 20px;
}
Nested grids
Yes you can nest a grid inside a grid-element of the main container. Simple set display:grid and specify the number of cols and rows. For example:
[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”PgJmBg” default_tab=”result” user=”Kauress”]See the Pen CSS3 Crash Notes: Part 7 by Kauress (@Kauress) on CodePen.[/codepen_embed]Aligning content
- Align element along the row with justify-items: center
- Align element in columns with align-items: center
- To align content use text-align:center
