Questo post mette in evidenza alcune righe di CSS efficaci che svolgono un lavoro molto impegnativo e ti aiutano a creare layout moderni e solidi.
Pubblicato: 7 luglio 2020, ultimo aggiornamento: 15 dicembre 2025
I layout CSS moderni consentono agli sviluppatori di scrivere regole di stile davvero significative e robuste con pochi tasti. Il discorso precedente e questo post successivo esaminano 10 potenti righe di CSS che svolgono un lavoro molto impegnativo.
Per seguire o giocare con queste demo, dai un'occhiata al sito incorporato sopra o visita 1linelayouts.com.
01. Super Centered: place-items: center
Per il primo layout "a riga singola", risolviamo il mistero più grande di tutto il mondo CSS: centrare gli elementi. Voglio che tu sappia che è più facile di quanto pensi con place-items: center.
Specifica prima grid come metodo display, quindi scrivi place-items: center sullo stesso elemento. place-items è una scorciatoia per impostare contemporaneamente align-items e justify-items. Se lo imposti su center, sia align-items che justify-items vengono impostati su center.
.parent {
display: grid;
place-items: center;
}
In questo modo, i contenuti vengono centrati perfettamente all'interno dell'elemento principale, indipendentemente dalle dimensioni intrinseche.
02. Il pancake decostruito: flex: <grow> <shrink> <baseWidth>
Poi abbiamo il pancake scomposto. Questo è un layout comune, ad esempio, per i siti di marketing, che possono avere una riga di 3 elementi, di solito con un'immagine, un titolo e un testo che descrive alcune caratteristiche di un prodotto. Sui dispositivi mobili, vogliamo che si impilino bene e si espandano man mano che aumentiamo le dimensioni dello schermo.
Utilizzando Flexbox per questo effetto, non avrai bisogno di query supporti per regolare la posizione di questi elementi quando lo schermo viene ridimensionato.
La sintassi abbreviata flex sta per: flex: <flex-grow> <flex-shrink> <flex-basis>.
Per questo motivo, se vuoi che le caselle si riempiano fino alla dimensione <flex-basis>, si riducano su dimensioni più piccole, ma non si allunghino per riempire lo spazio aggiuntivo, scrivi: flex: 0 1 <flex-basis>. In questo caso, il tuo <flex-basis> è 150px, quindi l'aspetto è il seguente:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Se vuoi che le caselle si estendano e riempiano lo spazio quando vanno a capo, imposta <flex-grow> su 1, in modo che l'aspetto sia il seguente:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Ora, quando aumenti o riduci le dimensioni dello schermo, questi elementi flessibili si riducono e si espandono.
03. Sidebar Says: grid-template-columns: minmax(<min>, <max>) …)
Questa demo sfrutta la funzione minmax per i layout di griglia. In questo modo, impostiamo la dimensione minima della barra laterale su 150px, ma sugli schermi più grandi consentiamo di estenderla fino a 25%. La barra laterale occuperà sempre 25% dello spazio orizzontale del suo elemento principale finché 25% non diventa inferiore a 150px.
Aggiungilo come valore di grid-template-columns con il seguente valore:
minmax(150px, 25%) 1fr. L'elemento nella prima colonna (la barra laterale in questo caso) ottiene un minmax di 150px a 25%, mentre il secondo elemento (la sezione main qui) occupa il resto dello spazio come singola traccia 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack: grid-template-rows: auto 1fr auto
A differenza del pancake decostruito, questo esempio non va a capo con i suoi elementi secondari quando le dimensioni dello schermo cambiano. Comunemente definito piè di pagina fisso, questo layout viene spesso utilizzato sia per i siti web che per le app, nelle applicazioni mobile (il piè di pagina è comunemente una barra degli strumenti) e nei siti web (le applicazioni a pagina singola utilizzano spesso questo layout globale).
L'aggiunta di display: grid al componente ti darà una griglia a colonna singola, ma l'area principale sarà alta solo quanto i contenuti con il piè di pagina sottostante.
Per fare in modo che il piè di pagina rimanga in basso, aggiungi:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
In questo modo, i contenuti dell'intestazione e del piè di pagina assumono automaticamente le dimensioni dei relativi elementi secondari e lo spazio rimanente (1fr) viene applicato all'area principale, mentre la riga di dimensioni auto assumerà le dimensioni dei contenuti minimi dei relativi elementi secondari, quindi man mano che i contenuti aumentano di dimensioni, la riga stessa crescerà per adattarsi.
05. Layout classico del Santo Graal: grid-template: auto 1fr auto / auto 1fr auto
Per questo layout classico, sono presenti un'intestazione, un piè di pagina, una barra laterale sinistra, una barra laterale destra e i contenuti principali. È simile al layout precedente, ma ora con le barre laterali.
Per scrivere l'intera griglia utilizzando una singola riga di codice, utilizza la proprietà grid-template. In questo modo puoi impostare contemporaneamente sia le righe che le colonne.
La coppia proprietà-valore è: grid-template: auto 1fr auto / auto 1fr auto. La barra tra il primo e il secondo elenco separato da spazi indica l'interruzione tra righe e colonne.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Come nell'ultimo esempio, in cui l'intestazione e il piè di pagina avevano contenuti con dimensioni automatiche, qui la barra laterale sinistra e quella destra vengono ridimensionate automaticamente in base alle dimensioni intrinseche dei relativi elementi secondari. Tuttavia, questa volta si tratta della dimensione orizzontale (larghezza) anziché di quella verticale (altezza).
06. Griglia a 12 sezioni: grid-template-columns: repeat(12, 1fr)
Poi abbiamo un altro classico: la griglia a 12 colonne. Puoi scrivere rapidamente griglie in CSS con la funzione repeat(). Utilizzando repeat(12, 1fr); per le colonne del modello di griglia, ottieni 12 colonne, ciascuna di 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Ora che hai una griglia di 12 colonne, puoi posizionare gli elementi secondari sulla griglia. Un modo per farlo è posizionarli utilizzando le linee della griglia. Ad esempio, grid-column: 1 / 13 si estenderebbe dalla prima riga all'ultima (la tredicesima) e su 12 colonne. grid-column: 1 / 5; si estenderebbe sui primi quattro.
Un altro modo per scrivere questo è utilizzare la parola chiave span. Con span, imposti la linea di partenza e poi il numero di colonne da estendere da quel punto di partenza. In questo caso, grid-column: 1 / span 12 equivale a grid-column: 1 / 13 e grid-column: 2 / span 6 equivale a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Per questo settimo esempio, combina alcuni dei concetti che hai già imparato per creare un layout adattabile con elementi secondari flessibili e posizionati automaticamente. Piuttosto comodo, no? I termini chiave da ricordare sono repeat, auto-(fit|fill) e minmax()', che puoi ricordare con l'acronimo RAM.
Insieme, l'aspetto è il seguente:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Stai utilizzando di nuovo repeat, ma questa volta con la parola chiave auto-fit anziché un valore numerico esplicito. In questo modo, gli elementi secondari vengono posizionati automaticamente. Questi elementi secondari hanno anche un valore minimo di base di 150px con un valore massimo di 1fr, il che significa che sugli schermi più piccoli occuperanno l'intera larghezza di 1fr e, quando raggiungeranno una larghezza di 150px ciascuno, inizieranno a scorrere sulla stessa riga.
Con auto-fit, le caselle si estenderanno man mano che la loro dimensione orizzontale supera i 150 px per riempire tutto lo spazio rimanente. Tuttavia, se lo imposti su auto-fill, non si estenderanno quando viene superata la dimensione di base nella funzione minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line-up: justify-content: space-between
Per il layout successivo, il punto principale da dimostrare è justify-content: space-between, che posiziona il primo e l'ultimo elemento secondario ai bordi del riquadro di delimitazione, con lo spazio rimanente distribuito uniformemente tra gli elementi. Queste schede sono posizionate in una modalità di visualizzazione Flexbox, con la direzione impostata su colonna utilizzando flex-direction: column.
In questo modo, il titolo, la descrizione e il blocco di immagini vengono posizionati in una colonna verticale all'interno della scheda principale. Poi, l'applicazione di justify-content: space-between ancora il primo elemento (titolo) e l'ultimo (blocco di immagini) ai bordi del flexbox, mentre il testo descrittivo tra questi viene posizionato con una spaziatura uguale per ogni endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Qui entriamo nel merito di alcune tecniche che hanno implicazioni davvero interessanti per i layout e la progettazione di UI adattabili. In questa demo, imposterai la larghezza utilizzando clamp in questo modo: width: clamp(<min>, <actual>, <max>).
In questo modo vengono impostate una dimensione minima e massima assoluta e una dimensione effettiva. Con i valori, l'aspetto può essere il seguente:
.parent {
width: clamp(23ch, 60%, 46ch);
}
La dimensione minima è 23ch o 23 unità di caratteri, mentre la dimensione massima è 46ch, 46 caratteri. Le unità di larghezza dei caratteri si basano sulla dimensione del carattere dell'elemento (in particolare sulla larghezza del glifo 0). La dimensione "effettiva" è del 50%, che rappresenta il 50% della larghezza dell'elemento principale.
In questo caso, la funzione clamp() consente a questo elemento di mantenere una larghezza del 50% fino a quando il 50% non è maggiore di 46ch (su viewport più ampie) o inferiore a 23ch (su viewport più piccole). Come puoi vedere, quando allargo e restringo le dimensioni dell'elemento principale, la larghezza di questa scheda aumenta fino al punto massimo bloccato e diminuisce fino al punto minimo bloccato. Rimane quindi centrato nell'elemento principale, poiché abbiamo applicato proprietà aggiuntive per centrarlo. In questo modo, i layout sono più leggibili, poiché il testo non sarà troppo largo (superiore a 46ch) o troppo compresso e stretto (inferiore a 23ch).
Questo è anche un ottimo modo per implementare la tipografia adattabile. Ad esempio, potresti scrivere: font-size: clamp(1.5rem, 20vw, 3rem). In questo caso, la dimensione del carattere di un titolo rimarrebbe sempre compresa tra 1.5rem e 3rem, ma aumenterebbe e diminuirebbe in base al valore effettivo di 20vw per adattarsi alla larghezza dell'area visibile.
Questa è un'ottima tecnica per garantire la leggibilità con un valore di dimensione minimo e massimo.
10. Rispetto per l'aspetto: aspect-ratio: <width> / <height>
Infine, quest'ultimo layout risolve un problema frequente: mantenere le proporzioni di un'immagine.
Con la proprietà aspect-ratio, quando ridimensiono la scheda, il blocco visivo verde mantiene queste proporzioni 16:9. Rispettiamo le proporzioni con aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Per mantenere proporzioni di 16 x 9 senza questa proprietà, devi utilizzare un hack padding-top e assegnargli un padding di 56.25% per impostare un rapporto tra altezza e larghezza. A breve avremo una proprietà per evitare l'hack e la necessità di calcolare la percentuale. Puoi creare un quadrato con proporzioni 1 / 1, un rettangolo con proporzioni 2:1 con 2 / 1 e, in realtà, qualsiasi cosa ti serva per ridimensionare l'immagine con un rapporto di dimensioni impostato.
.square {
aspect-ratio: 1 / 1;
}
È utile conoscere questa funzionalità, perché risolve molti problemi degli sviluppatori che ho dovuto affrontare più volte, soprattutto per quanto riguarda i video e gli iframe.
Conclusione
Grazie per aver seguito questo percorso attraverso 10 potenti righe di CSS. Per scoprire di più, guarda il video completo.