Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

Layout con CSS Grid: Colonne fluide e migliori spaziature

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: A Quick Start Guide
CSS Grid Layout: Using Grid Areas

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

In questo tutorial prenderemo la griglia dal nostro precedente tutorial e la useremo come un parco giochi per approfondire Grid. Miglioreremo il modo di definire le nostre spaziature, esploreremo i layout flessibili, l'unità fr e introdurremo la funzione repeat().

Unità flessibili

L'intero punto di Grid è quello di consentirci di controllare correttamente i layout sul web, quindi rendiamo fluida la nostra griglia statica prima di andare avanti. Se vi ricordate, noi stavamo definendo la nostra griglia con misurazioni in pixel statici:

È possibile utilizzare anche altre unità qui, come ems, o rems per esempio. O persino unità ancor più insolite come vh e vmin.

In questo caso modificheremo la nostra unità in pixel a favore delle percentuali. Poiché stiamo definendo la larghezza delle nostre colonne e la larghezza delle nostre spaziature manualmente dobbiamo assicurarci che i valori totali siano uguali al 100%:

Attenzione alla distanza

Esiste un modo più recente, più efficiente per dichiarare le misure delle spaziature, e cioè con una proprietà appositamente creata. Possiamo usare grid-column-gap e grid-row-gap o invece la proprietà abbreviata grid-gap.

Utilizzare questo significa che non abbiamo più bisogno di includere i tracciati di grid per ospitare le nostre spaziature, abbiamo solo bisogno di dichiarare le colonne e le righe, quindi nel nostro caso significa tre di ciascuno:

Hmm, è un po' disordinato, ma fa abbastanza il suo lavoro. La differenza che noterete è che la larghezza delle colonne ora aggiunge fino al 100%; le nostre spaziature in realtà saranno sottratte da loro automaticamente.

Repeat

Scriviamolo in un modo più ordinato, utilizzando la funzione repeat():

Questo afferma "ripetere 33,33% tre volte" dandoci tre colonne. E non abbiamo nemmeno bisogno della dichiarazione grid-template-rows perché comunque il valore auto è assegnato come predefinito. Ora abbiamo solo bisogno di dichiarare quanto grande vogliamo le nostre spaziature:

grid-gap accetterà un'unità fissa o flessibile, il che significa che possiamo combinare perfettamente le colonne fluide e le spaziature fisse senza eventuali calcoli complessi da parte nostra.

Reimpostiamo i nostri valori grid-column e grid-row

Qualcosa non va: abbiamo ancora un carico di dichiarazioni di grid-column e di grid-row sui nostri elementi del grid, ma sono tutte sbagliate perché non abbiamo più molti tracciati di grid. Fortunatamente, perché stiamo usando grid-gap per definire le nostre spaziature, possiamo lasciare il posizionamento degli elementi al posizionamento automatico – gli elementi non cadranno più nelle spaziature. Per ora, rimuoviamo tutto il posizionamento:

L'unità fr

Un miglioramento finale può essere fatto alla nostra semplice griglia; stiamo introducendo fr, o unità frazionaria. Una singola unità fr descrive "un pezzo di comunque molti pezzi in cui lo stiamo dividendo". Ad esempio, potremmo dichiarare le nostre colonne utilizzando:

Qui c'è un totale di tre unità fr, quindi ogni colonna sarebbe ampia un terzo. Ecco un altro esempio:

Ora c'è un totale di quattro unità fr, quindi la prima colonna avrebbe preso metà della larghezza disponibile, con le altre due colonne ognuna prendendo un quarto.

Queste unità sono davvero potenti, specialmente in combinazione con altre unità di misura:

Qui abbiamo dichiarato quattro colonne:

  • la prima è fissa ampia 300px
  • l'ultima è ampia un 20% flessibile dell'elemento contenitore di grid
  • poi vengono calcolate le unità fr, lasciando la seconda colonna con un pezzo dello spazio rimanente
  • e la terza con tre pezzi.

Ha questo aspetto, perfettamente evidenziando l'auto-posizionamento poiché i nostri nove elementi si spostano per colmare i vuoti:

Ma torniamo alla nostra griglia originale. Cerchiamo di sostituire il valore goffo e impreciso di 33,33% con 1fr:

Pen finita:

Conclusione

Quindi, per ricapitolare:

  1. Grid accetterà unità di misurazione flessibili in combinazione con unità fisse.
  2. Non abbiamo bisogno di dichiarare le spaziature all'interno del nostro grid-template, possiamo utilizzare invece la proprietà grid-gap.
  3. grid-gap significa che siamo meno legati al posizionamento dei nostri gli elementi della griglia  – possiamo consegnare più responsabilità all'auto-posizionamento.
  4. La funzione repeat() ci salverà tempo e manterrà i nostri fogli di stile gestibili.
  5. fr, o unità frazionaria è un modo molto potente per descrivere modelli di griglia.

Abbiamo fatto una lunga strada in solo due tutorial, ma ora siete gli orgoglioso proprietari di una griglia molto ordinata e concisa! Nel prossimo tutorial esploreremo le aree della griglia, daremo un'occhiata alla parola chiave span e ad alcuni pratici layout.

Risorse utili

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.