Introduzione a CSS Grids
Nicola Zambello
Nicola Zambello
Frontend developer @ RedTurtle
Studente @ UniFe
@nicolazambello
nzambello
nzambello @ italiajs.slack.com
Perchè usare CSS Grids?
- Layout su 2 dimensioni
- Markup semplice
- Alcun framework né JavaScript
...e la compatibilità?
😱
Grid
Per creare una griglia, la prima cosa da usare è:
display: grid;La griglia è formata da righe e colonne.
I creati dalle intersezioni delle linee vengono chiamati tracks.
Grid tracks
grid-template-columns
grid-template-rows
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px 100px;Esempio:
Grid gap
grid-gap
grid-gap: 10px;Esempio:
Fraction units
<property>: nfr;
grid-template-columns: 1fr 2fr 1fr;Esempio:
repeat()
<property>: repeat(k, nfr);
grid-template-columns: repeat(3, 1fr);Esempio:
Talk is cheap, show me the code.
̶ Linus Torvalds
Demo time!
grid-column / grid-row
grid-column-start: 2;
grid-column-end: 3;
grid-row: 1 / span 2;
grid-column: 1 / -1;Demo time!
Template areas
grid-template-areas
grid-area
grid-template-areas:
"h h h h h h h h h h h h"
"m c c c c c c c c c c c"
"f f f f f f f f f f f f";
grid-area: c;Esempio:
Demo time!
Check intermedio
-
display: grid;
-
definire tracks
-
fraction units
-
repeat()
-
posizionare elementi
- template areas
Auto-fit and minmax
grid-template-columns: repeat(auto-fit, 100px);
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));Implicit rows
grid-auto-rows
grid-auto-rows: 100px;Esempio:
Demo time!
Creiamo una griglia di immagini
Named rows
grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end];
grid-template-rows: [main-start] 40px [content-start] auto [content-end] 40px [main-end];Esempio:
Allineare il contenuto della griglia
justify-content
align-content
Allineare il contenuto nella griglia
justify-items / justify-self
align-items / align-self
Auto-fit vs auto-fill
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));Demo time!
Compatibilità
Compatibilità
display: grid;
display: -ms-grid;
display: grid;Workaround:
Compatibilità
-ms-grid-columns: 75px 1fr 50px 50px;
-ms-grid-rows: 1fr 1fr 1fr;
grid-template-columns: 75px 1fr repeat(2, 50px);
grid-template-rows: 1fr 1fr 1fr;Compatibilità
grid-column-start: 3;
grid-column-end: 5;
grid-column: 3 / 5;-ms-grid-column: 3;
-ms-grid-column-span: 2;Workaround:
Compatibilità
grid-gap
.grid-child {
&:not(:nth-child(n+4)) {
margin-bottom: 10px;
}
&:not(:nth-child(3n)) {
margin-right: 10px;
}
}@supports (display: grid) {
.grid-child {
grid-gap: 10px;
margin-right: 0;
margin-bottom: 0;
}
}Grid vs Flexbox
| Layout 2 dimensioni | Layout 1 dimensione |
| Layout-first | Content-first |
| Markup semplice, possibilità di spostare oggetti | Maggior flessibilità (inline) |
Quindi il senso della vita è il divertimento.
̶ Linus Torvalds