{"id":802,"date":"2018-03-27T10:37:22","date_gmt":"2018-03-27T08:37:22","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/the-new-css-layout-un-estratto\/"},"modified":"2018-03-27T10:37:22","modified_gmt":"2018-03-27T08:37:22","slug":"the-new-css-layout-un-estratto","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/the-new-css-layout-un-estratto\/","title":{"rendered":"The New CSS Layout, un estratto"},"content":{"rendered":"
\n

Nota degli editori:<\/strong> Siamo lieti di condividere un estratto dal Capitolo 3 (\u201cThe New Layout\u201d) del nuovo libro di Rachel Andrew<\/a>, The New CSS Layout<\/em><\/a>, disponibile adesso da A Book Apart<\/a>.<\/p>\n<\/div>\n

\n

Come abbiamo visto, flexbox non \u00e8 stato progettato per i grid layout, ma \u00e8 proprio questo il caso in cui la nostra pi\u00f9 nuova specifica d\u00e0 il meglio di s\u00e9. CSS Grid Layout fa esattamente quello che il suo nome suggerisce: permette la creazione di layout a griglia in CSS. Ossia, layout bidimensionali<\/em>: disporre contemporaneamente cose come una riga e una colonna. Vedremo numerosi esempi di Grid Layout nel resto di questo libro, ma cominciamo a vedere come Grid pu\u00f2 risolvere il problema che abbiamo avuto quando abbiamo cercato di usare flexbox per una griglia.<\/p>\n

In questo esempio, sto creando una griglia a tre colonne (Fig 3.17). Il mio container ha display: grid<\/code> e ho creato tre colonne di larghezza uguale con la propriet\u00e0 grid-template-columns<\/code>, pi\u00f9 una nuova unit\u00e0 creata per Grid: un’unit\u00e0 di lunghezza flessibile nota come fr<\/code>. Nel Capitolo 5 esamineremo pi\u00f9 da vicino questa unit\u00e0; per ora, tenete a mente che rappresenta una frazione dello spazio disponibile nel grid container. Con tre track ciascuna impostata a 1fr<\/code>, lo spazio disponibile \u00e8 diviso in tre e distribuito equamente. Questo \u00e8 tutto quello che dobbiamo fare per far s\u00ec che il figlio diretto del container venga mostrato come una griglia. A differenza di flexbox, non dobbiamo aggiungere alcuna regola ai figli: semplicemente, appariranno da soli in ogni cella della griglia.<\/p>\n

\n
.cards <\/span>{<\/span>\n\tmargin<\/span>:<\/span> 0 -10px;<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> 1fr 1fr 1fr;<\/span>\n}<\/span><\/code><\/pre>\n
\"Screenshot:<\/p>\n
Fig 3.17: Il grid layout di base.<\/p>\n<\/div>\n
Come potete vedere, gli item formano una griglia in senso stretto, senza che noi si debba dare loro una qualsiasi larghezza. Possiamo risolvere un’altra questione che abbiamo quando creiamo una flexbox grid, usando propriet\u00e0 che fanno parte della specifica Grid. Per creare dei gap tra i nostri flex item, nel nostro esempio flexbox abbiamo usato dei margin sui flex item e poi abbiamo dovuto aggiungere un margine negativo al container per tener conto dei margin left e right indesiderati sugli item dell’estrema sinistra e destra. CSS Grid Layout include una propriet\u00e0 grid-gap<\/code> che distanzia gli item. Questa propriet\u00e0 \u00e8 la shorthand per grid-column-gap<\/code> e grid-row-gap<\/code>, che possono anche essere specificate individualmente.<\/p>\n
Per dimostrare come funziona, ho rimosso i margin dagli item e il margine negativo dal container e ho distanziato gli item con grid-gap<\/code>. Produrrete lo stesso identico layout di prima nel browser, ma senza il bisogno di trafficare con margin e margini negativi.<\/p>\n
\n
.cards <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> 1fr 1fr 1fr;<\/span>\n\tgrid-gap<\/span>:<\/span> 20px;<\/span>\n}<\/span><\/code><\/pre>\n
Proprio mentre questo libro andava in stampa, il CSS Working Group ha espresso l’intenzione di cambiare il nome delle propriet\u00e0 grid-gap<\/code>. grid-column-gap<\/code> diventer\u00e0 column-gap<\/code>, grid-row-gap<\/code> diventer\u00e0 row-gap<\/code> e la shorthand grid-gap<\/code> sar\u00e0 semplicemente gap<\/code>. Inoltre, la definizione di queste propriet\u00e0 \u00e8 stata spostata nella Box Alignment Specification. Questo significa che in futuro, anche flexbox potrebbe supportare i gap nello stesso modo in cui lo fa Grid.<\/p>\n
Dal momento che i browser hanno gi\u00e0 rilasciato queste propriet\u00e0, nell’immediato futuro faranno l’alias dei nomi grid-*<\/code> con i nuovi nomi. Al momento in cui scrivo, nessun browser supporta i nuovi nomi di tali propriet\u00e0, quindi ho conservato le versioni grid-*<\/code> in questi esempi. Se volete essere sicuri di supportare entrambe le versioni, non c’\u00e8 ragione per non elencarle entrambe nel vostro CSS, come in questo esempio:<\/p>\n
.cards <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> 1fr 1fr 1fr;<\/span>\n\tgrid-gap<\/span>:<\/span> 20px;<\/span>\n\tgap<\/span>:<\/span> 20px;<\/span>\n}<\/span><\/code><\/pre>\n<\/div>\n
\n
Posizionare gli item nella griglia#section1<\/a><\/h2>\n
Possiamo rapidamente allontanarci da quello che flexbox ci permette di fare sfruttando la nostra griglia bidimensionale e posizionandovi gli item. Il modo pi\u00f9 semplice per farlo \u00e8 di usare i numeri di linea. Una griglia ha le linee della griglia numerate: cominciano da 1 sia per le righe sia per le colonne. Notate che queste linee sono numerate secondo la modalit\u00e0 di scrittura del documento. Lavorando in inglese, una lingua da sinistra a destra, left-to-right<\/em> (LTR), la linea della colonna 1 \u00e8 sul lato sinistro della griglia, la linea della riga 1 \u00e8 in alto. In arabo, una lingua da destra a sinistra, right-to-left<\/em> (RTL), la linea della colonna 1 appare sulla destra della griglia. Il lato estremo della griglia (a destra in una lingua LTR e a sinistra in una lingua RTL) \u00e8 rappresentato da -1.<\/p>\n
\n
.cards <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> 1fr 1fr 1fr;<\/span>\n\tgrid-gap<\/span>:<\/span> 20px;<\/span>\n}<\/span>\n.card1 <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 1 \/ 3;<\/span>\n\tgrid-row<\/span>:<\/span> 1;<\/span>\n}<\/span>\n.card2 <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 3;<\/span>\n\tgrid-row<\/span>:<\/span> 1;<\/span>\n}<\/span>\n.card3 <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 1;<\/span>\n\tgrid-row<\/span>:<\/span> 2 \/ 4;<\/span>\n}<\/span>\n.card4 <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 2 \/ 4;<\/span>\n\tgrid-row<\/span>:<\/span> 2;<\/span>\n}<\/span>\n.card5 <\/span>{<\/span>\n\tgrid-column<\/span>:<\/span> 2 \/ 4;<\/span>\n\tgrid-row<\/span>:<\/span> 3;<\/span>\n}<\/span><\/code><\/pre>\n
\"Screenshot:<\/p>\n
Fig 3.18: Card piazzate sulla griglia per numero di linea.<\/p>\n<\/div>\n
Qui potete immediatamente vedere parte del potere di Grid Layout. Potete occupare colonne e<\/em> righe, cosa molto difficile da fare usando gli esistenti metodi di layout. Il colore di sfondo delle nostre card si estende al gutter, anche se il contenuto \u00e8 pi\u00f9 breve. Inoltre, \u00e8 molto facile cambiare fino a che punto si estende un blocco: possiamo perfino lasciare uno spazio vuoto! Se cambio la linea di inizio della card 3 alla linea della riga 3, otteniamo una cella vuota (Fig 3.19). Nella cella della griglia non pu\u00f2 mettersi nulla: questo comportamento \u00e8 diverso da quello di float, che cerca di risalire e occupare lo spazio disponibile.<\/p>\n
\"Screenshot:<\/p>\n
Fig 3.19: Lo spazio vuoto \u00e8 reso semplice con CSS Grid Layout.<\/p>\n<\/div>\n
Un altro metodo per posizionare gli item su una griglia comporta l’utilizzo di aree con nomi<\/em>. Questo permette di descrivere i propri layout direttamente nel CSS. Per fare ci\u00f2 con il nostro esempio, per prima cosa diamo un nome ad ogni card cone la propriet\u00e0 grid-area<\/code>. Sto usando solo le lettere da a<\/var> a e<\/var>.<\/p>\n
.card1 <\/span>{<\/span> grid-area<\/span>:<\/span> a;<\/span> }<\/span>\n.card2 <\/span>{<\/span> grid-area<\/span>:<\/span> b;<\/span> }<\/span>\n.card3 <\/span>{<\/span> grid-area<\/span>:<\/span> c;<\/span> }<\/span>\n.card4 <\/span>{<\/span> grid-area<\/span>:<\/span> d;<\/span> }<\/span>\n.card5 <\/span>{<\/span> grid-area<\/span>:<\/span> e;<\/span> }<\/span><\/code><\/pre>\n
Poi, aggiungo la propriet\u00e0 grid-template-areas<\/code> al container. Il valore di questa propriet\u00e0 descrive come dovrebbe apparire il nostro layout (Fig 3.20).<\/p>\n
\n
.cards <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> 1fr 1fr 1fr;<\/span>\n\tgrid-gap<\/span>:<\/span> 20px;<\/span>\n\tgrid-template-areas<\/span>:<\/span>\n\t\t\"a a b\"<\/span>\n\t\t\"c d d\"<\/span>\n\t\t\"c e e\"<\/span>;<\/span>\n}<\/span><\/code><\/pre>\n
\"Screenshot:<\/p>\n
Fig 3.20: Il valore di grid-template-areas mostra visivamente come appare il nostro layout.<\/p>\n<\/div>\n
Ci sono alcune cose da tenere a mente con grid-template-areas<\/code>. Per distribuire su pi\u00f9 celle, ripetiamo il nome dell’area. Card 1 si estende sulle prime due column track: pertanto, a<\/var> viene ripetuta. Le aree devono essere rettangolari per natura\u2014non possiamo ancora creare un’area a forma di L.<\/p>\n
Per lasciare dello spazio vuoto e per lasciare una cella vuota, usiamo il carattere del punto. Se sostituite la prima c<\/var> con .<\/var>, quella cella rimarr\u00e0 vuota quando il layout verr\u00e0 creato (Fig 3.21).<\/p>\n
.cards <\/span>{<\/span>\n\tdisplay<\/span>:<\/span> grid;<\/span>\n\tgrid-template-columns<\/span>:<\/span> 1fr 1fr 1fr;<\/span>\n\tgrid-gap<\/span>:<\/span> 20px;<\/span>\n\tgrid-template-areas<\/span>:<\/span>\n\t\t\"a a b\"<\/span>\n\t\t\". d d\"<\/span>\n\t\t\"c e e\"<\/span>;<\/span>\n}<\/span><\/code><\/pre>\n
\"Screenshot:<\/p>\n
Fig 3.21: Adesso ci rimane dello spazio nel nostro layout.<\/p>\n<\/div>\n
Se i nomi delle vostre grid-area sono pi\u00f9 lunghi di un carattere, vi consiglio di allineare le righe e le colonne visivamente nel valore di grid-template-areas<\/code>. Ci\u00f2 \u00e8 possibile perch\u00e9 pi\u00f9 di un carattere punto pu\u00f2 denotare una cella vuota, se non c’\u00e8 uno spazio tra loro. Potete anche aggiungere pi\u00f9 di un carattere di spazio per distanziare i nomi delle grid-area.<\/p>\n
Questo \u00e8 un modo molto carino per lavorare con i layout, dato quanto \u00e8 facile spostare in giro gli item. Mi piace lavorare cos\u00ec durante la fase di prototipazione: piuttosto che preoccuparmi del modo in cui ottenere un layout, posso capire quale sia il modo migliore per presentare la mia interfaccia. Poi posso ritornare al markup e assicurarmi che sia in ordine logico basandomi su quelle decisioni.<\/p>\n
Con questi pochi esempi, avete gi\u00e0 sufficiente conoscenza per cominciare a usare Grid Layout e per prendere decisioni in merito a quali metodi di layout usare. C’\u00e8 dell’altro a venire, ma tenete a mente che sebbene la specifica sia estesa e possiate fare molte cose, la sua idea centrale \u00e8 molto semplice. Potete fare molto con molto poco CSS. Man mano che cominciate a creare layout, avrete delle domande e vorrete ottenere sempre di pi\u00f9 con questi metodi di layout. Qui \u00e8 dove entra in gioco il resto di questo libro!<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In questo estratto dal Capitolo 3 di The New CSS Layout di Rachel Andrew, ci viene mostrato come creare una griglia base a tre colonne usando CSS Grid Layout. Poi, ci spiega come disporre degli elementi su pi\u00f9 colonne e righe e come usare le aree coi nomi per descrivere il layout direttamente nel CSS.<\/p>\n","protected":false},"author":818,"featured_media":7000832,"comment_status":"open","ping_status":"open","template":"","categories":[244,206],"tags":[],"coauthors":[487],"class_list":["post-802","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-numero-228-30-ottobre-2017"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=802"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000832"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=802"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Esempio di codice: http:\/\/bkaprt.com\/ncl\/03-17\/<\/a><\/p>\n<\/div>\n
Esempio di codice: http:\/\/bkaprt.com\/ncl\/03-16\/<\/a><\/p>\n<\/div>\n
Esempio di codice: http:\/\/bkaprt.com\/ncl\/03-15\/<\/a><\/p>\n<\/div>\n
Esempio di codice: http:\/\/bkaprt.com\/ncl\/03-14\/<\/a><\/p>\n<\/div>\n