CSS Grid
The Moment I Stopped Hating CSS
(so much)
Nikita Malyschkin
@nmalyschkin
Nikita Malyschkin
web developer by day
philosopher when drunk
Javascript / Python / C++ / more
Twitter / GitHub / Telegram
@nmalyschkin
I HATE CSS!
CSS Grid
new way to position element with CSS
Why do we need another way to position elements?
designing a layout
≠
implementing a layout
CSS Grid
Concept
CSS Grid
Basic Syntax
We differentiate:
- grid
- items
<div class="grid">
<div class="item1" />
<div class="item2" />
</div>.grid {
display: grid;
}.grid {
display: grid;
grid-template-columns: 1fr 100px 10% 2fr;
grid-template-rows: 50px auto;
}.grid {
display: grid;
grid-template-columns: 1fr 100px 10% 2fr;
grid-template-rows: 50px auto;
grid-column-gap: 10px;
grid-row-gap: 15px;
}.grid {
display: grid;
grid-template-columns: 1fr 100px 10% 2fr;
grid-template-rows: 50px auto;
grid-column-gap: 10px;
grid-row-gap: 15px;
grid-template-areas:
"logo header . rightBar"
"logo main main rightBar"
}.item {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}.item {
grid-column: 2 / 3;
grid-row: 1 / 3;
}.item {
grid-column: 2 / span 1;
grid-row: 1 / span 2;
}.item {
grid-area: header;
}
time to code!
Main layout
Let's implement!
.grid {
display: grid;
grid-template-rows: 80px 80px 1fr 80px;
grid-template-columns: 240px 1fr 200px;
grid-template-areas:
"logo header header"
"logo main main"
"menu main main"
"menu footer footer"
}
.main {
grid-area: main;
}
.toggleBar {
grid-column: 3 / span 1;
grid-row: 2 / span 3;
}CSS Grid
Advanced Syntax
CSS Grid
implicit rows and columns
.grid {
display: grid;
grid-template-columns: 1fr 100px 10% 2fr;
grid-template-rows: 50px auto;
}
.grid {
display: grid;
grid-template-columns: 1fr 100px 10% 2fr;
grid-template-rows: 50px auto;
grid-template-areas:
"logo header . rightBar"
"logo main main rightBar"
}
.grid {
display: grid;
grid-template-columns: 1fr 100px 10% 2fr;
grid-template-rows: 50px auto;
grid-template-areas:
"logo header . rightBar"
"logo main main rightBar"
}
.header {
grid-area: header;
}
.logo {
grid-area: logo;
}
/* [...] */CSS Grid
item alignment
.grid {
display: grid;
grid-template: 1fr 2fr / 50px auto;
align-items: center; /* aligns vertically */
justify-items: end; /* aligns horizontally */
}
.special_item {
/* aligns vertically, overwrites grid settings */
align-self: stretch;
}CSS Grid
special length functions
.grid {
display: grid;
grid-template: 1fr 2fr / 1fr 1fr 1fr 1fr;
}
.grid {
display: grid;
grid-template: 1fr 2fr / repeat(4, 1fr);
}
.grid {
display: grid;
grid-template: 1fr 2fr / repeat(4, minmax(250px, 1fr));
}
.grid {
display: grid;
grid-template: 1fr 2fr / repeat(auto-fill, minmax(250px, 1fr));
}
Element Grid
.grid {
display: grid;
grid-auto-rows: auto;
grid-template-columns: repeat(auto-fit, 150px);
place-items: center;
align-content: baseline;
justify-content: space-around;
gap: 20px;
}CSS Grid is great for
- main layouts
- component layout
- element grids
CSS Grid Cheat Sheet
( grid.malven.co )
Try it out!
It's fun!
position: absolute
display: flexbox
HTML Table
float: right
position: fixed
Programming with CSS Grid
overflow issues
CSS Grid
By Nikita Malyschkin
