CSS Grid Layout

Review Notes
CSS Grid Layout: Defining Columns & Rows

.container {

display: grid;

grid-template-columns: 200px 100px;

grid-template-rows: 200px 50px 100px;

}
CSS Grid Layout: Grid-Gap property

.container { .container {
display: grid; display: grid;
grid-template-columns : grid-template-columns: 200px
100px 200px;
200px 100px 200px;
grid-template-rows: 100px
grid-template-rows : 100px
100px;
100px;
grid-gap: 20px 10px;
}
}
Repeat function for grid-template-*

.container { .container {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
} grid-template-columns: repeat(2,
70px 1fr);
grid-template-rows: 2fr 1fr 3fr;
height: 90vh;
}
Item Placement in Grid

.container { .container {
display: grid;
display: grid;
grid-gap: 10px;
grid-gap: 10px; grid-template-columns : repeat(3, 1fr);
grid-template-columns: repeat(3, grid-template-rows: repeat(2, 1fr);
grid-auto-flow: dense;
1fr); }
grid-template-rows: repeat(2, .item4 {
grid-column: 2 / span 2;
1fr);
grid-row: 3 / span 2;
} }
.item7 {
grid-row: 1 / span 3;
grid-column: 2 / span 2;
}
Justify & Align Content

.container { .container {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: grid-template-columns:
repeat(4,auto); repeat(4,auto);
} justify-content: auto;
min-height: 90vh;
align-content: space-between;
}
Justify & Align Items

.container { .container {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: repeat(4, grid-template-columns: repeat(4,
auto); auto);
} justify-items: center;
min-height: 90vh;
align-items: center;
}
Justify & Align Individual Items

.container { .container {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: repeat(4,
grid-template-columns: repeat(4,
auto);
auto); height: 90vh;
height: 90vh; justify-items: stretch;
justify-items: stretch; align-items: stretch;
align-items: stretch; }
.item2 {
}
justify-self: center;
align-self: center;
}
The minmax() function

.container { .container {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
} grid-template-columns: 50px
minmax(100px, 1fr) minmax(70px, 1fr);
justify-content: space-between;
}
The grid-template-areas property

.container { .container {
display: grid;
display: grid; grid-gap: 10px;
grid-template-columns : repeat(3, 1fr);
grid-gap: 10px;
grid-template-areas :
grid-template-columns: repeat(3, "apple orange"
"banana banana"
1fr);
". mango" ;
} }
.item3 {
grid-area : mango;
}
.item11 {
grid-area : apple;
}
.item8 {
grid-area : banana;
}
.container { .container {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: 100px grid-template-columns:
100px; [sidebar-start start] 1fr
[content-start] repeat(3,1fr)
}
[content-end ] 1fr [end];
}
.item3 {
grid-column: content-start /
content-end;
}
Grid-Order

.container { .container {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
}
}
.item5 {
order: 1;
}
.item2 {
order: 4;
}
.item4 {
order: -1;
}
.container { .container {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: repeat(3, grid-template-columns: repeat(3,
1fr); 1fr);
grid-template-rows: repeat(2, grid-template-rows: repeat(2,
1fr); 1fr);
} grid-auto-rows: 1fr;
grid-auto-flow: column dense;
grid-auto-columns: 1fr;
}