Il modulo CSS Multi-column Layout è un potente strumento che ti consente di creare facilmente layout multi-colonna per le tue pagine web. L'ascesa del responsive design significa che è importante capire come utilizzare questo modulo.
Puoi utilizzare le proprietà delle colonne per creare layout flessibili e dinamici che si adattano alle diverse dimensioni dello schermo.
Specificare il numero di colonna, la larghezza e lo spazio
Per creare un layout a più colonne appropriato per il contenuto della tua pagina, dovresti iniziare decidendo su quante colonne vuoi che si estenda. Una delle proprietà più importanti nel modulo Multicolonna è la conteggio delle colonne property, che utilizzi per impostare il numero di colonne in cui suddividere il contenuto.
Per esempio:
.contenitore {
conteggio delle colonne: 3;
}
È inoltre possibile specificare la larghezza e lo spazio tra le colonne. È possibile impostare il valore della larghezza della colonna utilizzando uno qualsiasi dei le unità CSS supportate Piace px, em, O %.
Se larghezza della colonna è impostato per auto, il browser calcolerà la larghezza di ogni colonna in base a conteggio delle colonne proprietà e lo spazio disponibile all'interno del layout.
Ad esempio, questo CSS dichiara 3 colonne, ciascuna con una larghezza di 200 pixel:
.contenitore {
conteggio delle colonne: 3;
larghezza della colonna: 200px;
}
IL gap di colonna La proprietà specifica lo spazio, o spazio, tra le colonne in un layout a più colonne. Imposta la dimensione degli spazi vuoti vuoti tra colonne adiacenti e può assumere un valore di lunghezza in pixel, em o qualsiasi altra unità supportata.
Per esempio:
.contenitore {
conteggio delle colonne: 3;
gap di colonna: 20px; /* imposta lo spazio tra le colonne a 20 pixel */
}
Per impostazione predefinita, il valore di gap di colonna è impostato per normale. Il tuo browser sceglie questo valore per ottenere una spaziatura coerente tra le colonne nel tuo layout pur rimanendo visivamente piacevole. Questo valore può anche variare tra i browser e può anche dipendere dalla dimensione del carattere, dall'altezza della riga, proprietà posizionee altre proprietà di layout del contenuto delle colonne.
Assicurare l'equilibrio delle colonne
Le colonne CSS cercano di riempire tutto lo spazio disponibile all'interno di un layout. Questo a volte può portare a colonne che hanno altezze significativamente diverse, rendendo il layout non uniforme.
Per bilanciare le colonne, devi assicurarti che ogni colonna nel tuo layout abbia all'incirca la stessa quantità di contenuto.
Puoi ottenere ciò impostando il CSS riempimento colonna proprietà a bilancia. Un browser tenterà quindi di distribuire il contenuto in modo uniforme su tutte le colonne in modo che abbiano all'incirca la stessa altezza.
IL riempimento colonna proprietà è impostata su bilancia per impostazione predefinita, ma un valore di auto cambierà questo comportamento. L'utilizzo di auto distribuisce il contenuto tra le colonne in base allo spazio disponibile. Ciò può comportare una spaziatura non uniforme tra le colonne e altezze delle colonne non uniformi. Può persino produrre un layout con colonne vuote.
Ecco un esempio di come utilizzare il riempimento colonna proprietà per bilanciare le colonne in un layout a più colonne:
.layout multicolonna {
conteggio delle colonne: 3;
gap di colonna: 20px;
riempimento colonna: bilancia;
}
In questo esempio, abbiamo un layout a più colonne con tre colonne e uno spazio di 20 pixel tra ciascuna colonna. Impostando il riempimento colonna proprietà a bilancia, ci assicuriamo che il contenuto si distribuisca uniformemente tra le colonne, ottenendo altezze delle colonne bilanciate.
È importante notare che il riempimento colonna La proprietà potrebbe non funzionare bene per tutti i layout e potrebbe causare una spaziatura non uniforme tra le colonne. In tali casi, potrebbe essere necessario utilizzare JavaScript per bilanciare manualmente le colonne. Ricorda di seguire le migliori pratiche e utilizzare il miglioramento progressivo in modo da non fare affidamento su JavaScript.
Mettere tutto insieme
Puoi riunire tutto ciò che hai imparato sull'implementazione di un layout con colonne CSS e usarlo per creare un layout in stile rivista.
Innanzitutto, crea la struttura HTML di base. Usa un elemento contenitore per avvolgere il tuo contenuto, quindi crea diversi elementi figlio che puoi quindi disporre in colonne.
html>
<html>
<Testa>
<collegamentorel="foglio di stile"href="CSScolonne.css" />
Testa>
<corpo>
Elemento contenitore
<divclasse="layout rivista">Elementi figlio
<divclasse="articolo">
<h2>Titolo dell'articoloh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entra
magna vel lorem pharetra bibendum.P>
div><divclasse="articolo">
<h2>Titolo dell'articoloh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entra
magna vel lorem pharetra bibendum.P>
div><divclasse="articolo">
<h2>Titolo dell'articoloh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entra
magna vel lorem pharetra bibendum.P>
div>
div>
corpo>
html>
Per creare un layout in stile rivista utilizzando il modulo multicolonna CSS, combina il formato conteggio delle colonne, larghezza della colonna, gap di colonna, E riempimento colonna proprietà:
.layout-rivista {
conteggio delle colonne: 3;
larghezza della colonna: 300px;
gap di colonna: 20px;
riempimento colonna: bilancia;
}
.articolo {
colore di sfondo: #f8f8f8;
bordo-raggio: 4px;
scatola-ombra: 0 2px 4pxrgb(0, 0, 0, 0.1);
imbottitura: 10px;
irruzione all'interno: evita-colonna;
}
Questo esempio definisce anche il irruzione all'interno proprietà sul .articolo classe, con un valore di evita-colonna. La proprietà garantisce che ogni articolo rimanga all'interno di una singola colonna, anziché essere suddiviso in più colonne. Ecco come dovrebbe essere il layout:
Utilizzo di fallback per browser non supportati
È importante notare che il conteggio delle colonne proprietà non è supportata in tutti i browser. Browser che non supportano conteggio delle colonne, visualizzerà invece il contenuto in una singola colonna.
Per fornire stili di fallback per i browser non supportati, puoi utilizzare query di funzionalità come @supports per rilevare il supporto per il conteggio delle colonne proprietà e fornire stili alternativi quando la proprietà non è supportata.
Per esempio:
.contenitore {
/* Fallback per i browser che non supportano il conteggio delle colonne */
larghezza: 100%;
}
/* Rileva il supporto per il conteggio delle colonne */
@supports (conteggio colonne:3) {
.contenitore {
conteggio delle colonne: 3;
}
}
In questo esempio, usiamo il @supports feature query per rilevare il supporto per il conteggio delle colonne proprietà. Se il browser supporta il conteggio delle colonne, il file contenitore elemento verrà visualizzato in tre colonne. Se il browser non supporta il conteggio delle colonne, visualizzerà il contenuto in una singola colonna utilizzando l'estensione larghezza proprietà.
Suddividere il contenuto in colonne
Nel complesso, le colonne CSS forniscono un modo pratico e potente per creare layout multicolonna flessibili e reattivi che migliorano l'usabilità e l'esperienza utente dei contenuti web.
Utilizzando colonne CSS e JavaScript insieme, puoi creare layout ancora più sofisticati e dinamici che si adattano alle diverse preferenze dell'utente e alle diverse dimensioni del dispositivo, rendendo i tuoi contenuti web più accessibili e coinvolgenti per i tuoi utenti.
