Questo post mette in evidenza alcune potenti righe di CSS che svolgono un lavoro impegnativo e ti aiutano a creare layout moderni e robusti.
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 provare queste demo in autonomia, consulta l'incorporamento del sito riportato sopra o visita la pagina 1linelayouts.com.
01. Super Centered: place-items: center
Per il primo layout "a una riga", risolviamo il mistero più grande di tutto il mondo CSS: centrare gli elementi. Voglio farti sapere che è più facile di quanto pensi con place-items: center.
Specifica innanzitutto grid come metodo display, quindi scrivi place-items: center nello stesso elemento. place-items è una notazione abbreviata 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 del contenitore principale, indipendentemente dalle dimensioni intrinseche.
02. Pancake scomposto: flex: <grow> <shrink> <baseWidth>
Poi abbiamo la frittata scomposta. Questo è un layout comune per i siti di marketing, ad esempio, che possono avere una riga di tre elementi, di solito con un'immagine, un titolo e del testo che descrive alcune funzionalità di un prodotto. Sui dispositivi mobili, vogliamo che si impilino in modo ordinato e si espandano man mano che aumentiamo le dimensioni dello schermo.
Utilizzando Flexbox per questo effetto, non avrai bisogno di media query per regolare il posizionamento di questi elementi quando le dimensioni dello schermo cambiano.
L'abbreviazione flex sta per: flex: <flex-grow> <flex-shrink> <flex-basis>.
Per questo motivo, se vuoi che le caselle si riempiano fino alle dimensioni <flex-basis>, si restringano in 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 il codice sarà simile a questo:
.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 appaia così:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Ora, man mano che aumenti o diminuisci le dimensioni dello schermo, questi elementi flessibili si restringono e si ingrandiscono.
03. Barra laterale: grid-template-columns: minmax(<min>, <max>) …)
Questa demo sfrutta la funzione minmax per i layout a griglia. In questo caso, impostiamo la dimensione minima della barra laterale su 150px, ma sugli schermi più grandi, la allunghiamo fino a 25%. La barra laterale occuperà sempre 25% dello spazio orizzontale del contenitore principale finché 25% non diventa inferiore a 150px.
Aggiungi questo valore a grid-template-columns con il seguente valore:
minmax(150px, 25%) 1fr. L'elemento nella prima colonna (in questo caso la barra laterale) ottiene un minmax di 150px a 25%, mentre il secondo elemento (la sezione main) 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 di Deconstructed Pancake, questo esempio non esegue il wrapping dei relativi elementi secondari quando le dimensioni dello schermo cambiano. Comunemente chiamato 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 è in genere una barra degli strumenti) e nei siti web (le applicazioni a una sola pagina spesso utilizzano questo layout globale).
L'aggiunta di display: grid al componente creerà una griglia a una sola colonna, ma l'area principale sarà alta 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 assume le dimensioni minime dei relativi elementi secondari, in modo che, man mano che i contenuti aumentano di dimensioni, la riga stessa si espande per adattarsi.
05. Layout classico del Santo Graal: grid-template: auto 1fr auto / auto 1fr auto
In questo layout classico del Santo Graal, 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 sola 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 separati da spazi indica la suddivisione 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 contenevano contenuti con dimensionamento automatico, qui le barre laterali sinistra e destra vengono dimensionate automaticamente in base alle dimensioni intrinseche dei relativi elementi secondari. Tuttavia, questa volta si tratta della dimensione orizzontale (larghezza) anziché verticale (altezza).
06. Griglia a 12 colonne: 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 a griglia, ottieni 12 colonne da 1fr ciascuna.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Ora che hai una griglia di tracce a 12 colonne, possiamo posizionare gli elementi secondari nella griglia. Un modo per farlo è posizionarli utilizzando le griglie. Ad esempio, grid-column: 1 / 13 si estenderebbe dalla prima all'ultima riga (la 13ª) e coprirebbe 12 colonne. grid-column: 1 / 5; coprirebbe i primi quattro.
Un altro modo per scrivere questa query è utilizzare la parola chiave span. Con span, imposti la riga iniziale e il numero di colonne da estendere a partire da questo punto iniziale. In questo caso, grid-column: 1 / span 12 sarebbe equivalente a grid-column: 1 / 13 e grid-column: 2 / span 6 sarebbe equivalente 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à appreso per creare un layout reattivo con elementi secondari flessibili e posizionati automaticamente. Piuttosto comodo. I termini chiave da ricordare qui sono repeat, auto-(fit|fill) e minmax()', che puoi ricordare con l'acronimo RAM.
Nel complesso, l'aspetto è il seguente:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Stai utilizzando di nuovo la ripetizione, ma questa volta utilizzando la parola chiave auto-fit anziché un valore numerico esplicito. In questo modo viene attivato il posizionamento automatico di questi elementi secondari. Questi bambini 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, man mano che raggiungono una larghezza di 150px ciascuno, inizieranno a disporsi sulla stessa riga.
Con auto-fit, le caselle si allungano quando la loro dimensione orizzontale supera i 150 px per riempire tutto lo spazio rimanente. Tuttavia, se lo modifichi in auto-fill, non si allungheranno quando la dimensione di base nella funzione minmax viene superata:
.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 relativo riquadro di selezione, con lo spazio rimanente distribuito uniformemente tra gli elementi. Per queste schede, viene impostata 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 immagine vengono inseriti in una colonna verticale all'interno della scheda principale. Quindi, l'applicazione di justify-content: space-between ancora il primo (titolo) e l'ultimo (blocco immagine) elemento ai bordi del flexbox, mentre il testo descrittivo tra questi viene posizionato con una spaziatura uguale a ogni endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Blocco del mio stile: clamp(<min>, <actual>, <max>)
Qui entriamo nel merito di alcune tecniche con minore supporto del browser, ma che hanno implicazioni davvero entusiasmanti per i layout e la progettazione di UI responsive. In questa demo, imposti la larghezza utilizzando clamp nel seguente modo: width: clamp(<min>, <actual>, <max>).
In questo modo vengono impostate una dimensione minima e una massima assolute e una dimensione effettiva. Con i valori, può avere il seguente aspetto:
.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). Le dimensioni "effettive" sono pari al 50%, che rappresenta il 50% della larghezza dell'elemento principale.
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). Puoi notare che, man mano che allargo e restringo le dimensioni del contenitore principale, la larghezza di questa scheda aumenta fino al punto massimo bloccato e diminuisce fino al punto minimo bloccato. Rimane centrato nell'elemento principale perché abbiamo applicato proprietà aggiuntive per centrarlo. In questo modo, i layout sono più leggibili, in quanto il testo non sarà troppo largo (superiore a 46ch) o troppo schiacciato 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.
Si tratta di una tecnica efficace per garantire la leggibilità con un valore di dimensione minimo e massimo, ma ricorda che non è supportata in tutti i browser moderni, quindi assicurati di avere fallback ed esegui i test.
10. Rispetto delle proporzioni: aspect-ratio: <width> / <height>
Infine, questo ultimo strumento di layout è il più sperimentale del gruppo. È stata introdotta di recente in Chrome Canary in Chromium 84 e Firefox sta lavorando attivamente per implementarla, ma al momento non è presente in nessuna versione stabile del browser.
Tuttavia, voglio menzionarlo perché è un problema che si verifica molto spesso. E si tratta semplicemente di mantenere le proporzioni di un'immagine.
Con la proprietà aspect-ratio, quando ridimensiono la scheda, il blocco visivo verde mantiene le proporzioni 16:9. Stiamo rispettando le proporzioni con aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Per mantenere le proporzioni 16:9 senza questa proprietà, dovresti utilizzare un padding-top hack e assegnargli un padding di 56.25% per impostare un rapporto tra altezza e larghezza. A breve avremo una proprietà per evitare l'hacking e la necessità di calcolare la percentuale. Puoi creare un quadrato con proporzioni pari a 1 / 1, un rapporto 2:1 con 2 / 1 e qualsiasi altra cosa ti serva per scalare l'immagine con un rapporto di dimensioni impostato.
.square {
aspect-ratio: 1 / 1;
}
Sebbene questa funzionalità sia ancora in fase di sviluppo, è bene conoscerla perché risolve molti problemi degli sviluppatori che ho riscontrato molte volte, soprattutto per quanto riguarda video e iframe.
Conclusione
Grazie per aver seguito questo percorso attraverso 10 potenti righe di CSS. Per saperne di più, guarda il video completo e prova le demo.