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

Grazie!