Grid layouts
Key points
frunits take up all the space left to them, propoportional to their value.fr2takes up twice the space offr1, for instance.- No space between unit and
fr. Should be1fr, not1 fr. - Columns need to be defined as
ems, %, px, or similar. Without a proscribed height, rows take on the height of their content.
Simple Grid
container: display:grid; gap:10px;
child: grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; - set the height becasue it's all done by fractions.
height:400px;
* Shorthand:
container: display:grid; gap:10px;
child: grid-template: 100px 50px / 100px 200px;
values are rows, then columns. Columns define width.
width:325px;
Chessboard
container: display:grid;
child: gap:0; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
width:815px; - don't set height because content determines height. If you don't define width, the cells
cane come apart, strching to fill the container.
* Shorthands:
grid-template-columns: repeat(8, 100px);
grid-template-rows: repeat(8, 100px);
OR
grid-template: repeat(8,100px) / repeat(8,100px);
Second child auto
container: display:grid; gap:10px;
child: grid-template-columns:100px auto;
grid-template-rows:200px auto;
* Shorthand:
grid-template: 200px auto / 100px auto;
Note that in the wild, the rows will only expand for content; whereas columns expand to fit the parent width or
screen width.
Minmax
container: display:grid; gap:10px;
child: grid-template-columns: 100px minmax(200px, 800px);
grid-template-rows: 100px 200px;
* Shorthand:
grid-template: 100px 200px / 100px minmax(200px, 800px);
This is especially helpful when you want to allow more space horizontally.
Empty column
container: display:grid; gap:10px;
child: grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 200px);
* Shorthand:
grid-template: repeat(2, 200px) / repeat(3, 100px);
It fills out the rows and snakes down, leaving empty cells. Ensure there are no gaps between the
repeat and the (.
Not enough cells in grid template
container: display:grid; gap:10px;
child: grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
Height of extra cell will follow its content; its width will match the column's width.
* Shorthand:
grid-template: repeat(2, 200px) / repeat(2, 200px);
Dynamically make more cells in grid template
container: display:grid; gap:10px;
child: grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
grid-auto-rows: 300px
The grid will allow any new cell(s) to have the new height.
* Shorthand:
grid-template: repeat(2, 200px) / repeat(2, 200px);
Expands - set width - min-max
container: display:grid; gap:10px;
child: grid-template-columns: auto 200px minmax(100px, 500px);
grid-template-rows: 1fr 1fr 2fr;
grid-auto-rows: 50px;
Left column expands if it can. Central column set at 200px width. Right column expands to min of 100px, max of
500px.
Bottom cell only 50px high. Third row double height.
* Shorthand:
grid-template: 1fr 1fr 2fr / auto 200px minmax(100px, 500px);
Simple grid with flexbox centering. Second row not used.
container: height: 300px;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1.5fr;
grid-template-rows: 1fr 1fr;
child: display: flex;
align-items: center;
justify-content: center;
* Shorthand: grid-template: 1fr 1fr / 1fr 1fr 1.5fr;
First item spans 2 columns. Pushes sister divs to second row.
container: height: 300px;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1.5fr;
grid-template-rows: 1fr 1fr;
* Shorthand: grid-template: 1fr 1fr / 1fr 1fr 1.5fr;
First item starts at second column. Ends at last column.
Using the grid-column-end:-1 value enables dynamic content to end at the right column
regardless of how much content is there, making the grid extensible. You can also use the
grid-column-start:1 value to make it start at the first column.
container: height: 300px;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1.5fr;
grid-template-rows: 1fr 1fr;
* Shorthand: grid-template: 1fr 1fr / 1fr 1fr 1.5fr;
Second item becomes third
container: height: 300px;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1.5fr;
grid-template-rows: 1fr 1fr;
child - cowboy:
grid-column:span 2;
child - astronaut:
order:1;
grid-column:span 2;
When using grid area, it is important to position all items in the same way to avoid challenging layouts.
* another way of positioning astronaut:
grid-column-start:1; grid-column-end:3; grid-row-start:2; grid-row-end:3;*
Shorthand:
grid-area: 2 / 1 / 3 / 3 - row start, column start, row end, column end; x axis then y, in
other words.
Right hand div spans rows
container: height: 300px;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1.5fr;
grid-template-rows: 1fr 1fr;
child - cowboy:
grid-column:span 2;
child - astronaut:
order:1;
grid-column:span 2;
book: grid-row:span 2
* Shorthand: grid-area: 1 / 3 / -1 / -1
Overlay divs
container: height: 300px;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr 1.5fr;
grid-template-rows: 1fr 1fr;
child - cowboy:
grid-column:span 2; background-color:red;
grid-area: 1 / 1 / 2 / 3;
chid - astronaut:
order:1;
grid-column:span 2; background-color:lightblue;
grid-area: 2 / 1 / 3 / 3;
child - book: grid-row:span 2; background-color:#e5833180;
grid-area: 1 / 2 / 3 / 4;
* Last 2 digits of book's hex code (80) indicate the level of transparency.
* Shorthand: grid-template: 1fr 1fr / 1fr 1fr 1.5fr;