Slik bruker du CSS-kolonner for flere kolonne-websidelayouts

I mange år har CSS-flyter vært en fin, men nødvendig komponent i å lage websidelayouter. Hvis designet krevde flere kolonner, vendte du til flyter. Problemet med denne metoden er at til tross for den utrolige oppfinnsomheten som webdesignere / utviklere har vist i å lage komplekse nettstedoppsett, var CSS-flyter aldri egentlig ment å bli brukt på denne måten.

Mens flyter og CSS-posisjonering er sikker på å ha et sted i webdesign i mange år framover, gir nyere layoutteknikker, inkludert CSS Grid og Flexbox, nå webdesignere nye måter å opprette deres nettstedoppsett på. En annen ny layoutteknikk som viser mye potensial er CSS Multiple Columns.

CSS-kolonner har eksistert i noen år nå, men mangel på støtte i eldre nettlesere (hovedsakelig eldre versjoner av Internet Explorer) har holdt mange webprofessorer fra å bruke disse stilene i sitt produksjonsarbeid.

Med slutten av støtten til de eldre versjonene av IE, eksperimenterer noen webdesignere med nye CSS-layoutalternativer, inkludert CSS-kolonner, og finner at de har så mye mer kontroll med disse nye tilnærmingene enn de gjorde med flyter.

Grunnleggende om CSS-kolonner

Som navnet antyder, kan CSS Multiple Columns (også kjent som CSS3 multi-column layout) dele deg inn i et bestemt antall kolonner. De mest grunnleggende CSS-egenskapene du vil bruke er:

kolonne-count
kolonne-gap

For kolonneantal, angir du antall kolonner du vil ha. Kolonnegapet vil være tarmene eller avstanden mellom disse kolonnene. Nettleseren vil ta disse verdiene og dele innholdet jevnt i antall kolonner du angir.

Et vanlig eksempel på CSS flere kolonner i praksis ville være å dele en blokk med tekstinnhold i flere kolonner, som ligner på hva du ville se i en avisartikkel. Si at du har følgende HTML-oppsummering (Merk at for eksempel bare jeg legger starten på ett avsnitt, mens det i praksis vil være sannsynligvis flere avsnitt av innhold i denne oppslaget):


Overskriften til artikkelen din
Tenk deg mange stykker tekst her …

Hvis du så skrev disse CSS-stilene:

.content {-moz-column-count: 3; -webkit-kolonne-telling: 3; kolonne telling: 3; -moz-kolonne-gapet: 30px; -webkit-kolonne-gapet: 30px; kolonneavstand: 30px; }

Denne CSS-regelen ville dele «innhold» -delen i 3 like kolonner med et gap på 30 piksler mellom dem. Hvis du ville ha to kolonner i stedet for 3, ville du bare endre den verdien, og nettleseren ville beregne de nye breddene til disse kolonnene for å dele innholdet jevnt. Legg merke til at vi først bruker leverandør-prefikserte egenskaper først, etterfulgt av ikke-forhåndsdefinerte erklæringer.

Like enkelt som dette er bruken på denne måten tvilsom for bruk av nettstedet. Ja, du kan dele en masse innhold i flere kolonner, men dette kan ikke være den beste leseopplevelsen for Internett, spesielt hvis høyden på disse kolonnene faller under skjermbildet "fold".

Leserne må da bla opp og ned for å kunne lese hele innholdet. Likevel er rektor i CSS-kolonnene like enkelt som du ser her, og det kan brukes til å gjøre så mye mer enn bare å dele innholdet i enkelte avsnitt - det kan faktisk brukes til layout.

Layout med CSS-kolonner

Si at du har en nettside med et innholdsområde som har 3 kolonner med innhold. Dette er et veldig typisk nettstedslayout, og for å oppnå de tre kolonnene, vil du normalt flyte divisjonene som er inne. Med CSS flere kolonner er det så mye lettere.

Her er noen eksempler HTML:

 
Fra Vår blogg
Innholdet ville gå her …
  Bruke kolonne-breddeDet er en annen egenskap i tillegg til "kolonneantal" som du kan bruke, og avhengig av layoutbehovet, kan det faktisk være et bedre valg for nettstedet ditt. Dette er "kolonnebredde". Ved å bruke samme HTML-markering som vist tidligere, kan vi i stedet gjøre dette med vårt CSS:
 .content {-moz-column-width: 500px; -webkit-kolonne-bredde: 500px; kolonnebredde: 500px; -moz-kolonne-gapet: 30px; -webkit-kolonne-gapet: 30px; kolonneavstand: 30px; } .content div {display: inline-block; }
Måten dette virker på, er at nettleseren bruker denne "kolonnebredden" som den maksimale verdien av den kolonnen. Så hvis nettleservinduet er mindre enn 500 piksler bredt, vil disse 3 divisjonene vises i en enkelt kolonne, en av toppene til en annen. Dette er et typisk layout som brukes til mobile / små skjermoppsett.
 






Ettersom nettleserbredden øker for å være stor nok til å passe to kolonner sammen med de angitte kolonnehullene, går nettleseren automatisk fra en enkelt kolonneoppsett til to kolonner. Fortsett å øke skjermbredden og til slutt får du en 3-kolonnedesign, med hver av våre 3 divisjoner som vises i sin egen kolonne. Igjen, dette er en flott måte å få noen lydhør, multi-device friendly layouts, og du trenger ikke engang å bruke medieforespørsler for å endre layout stiler!
 Andre kolonneegenskaper
I tillegg til egenskapene som er dekket her, er det også egenskaper for "kolonne-regel", inkludert farge-, stil- og breddeverdier som lar deg lage regler mellom kolonnene dine. Disse vil bli brukt i stedet for grenser hvis du vil ha noen linjer som skiller kolonnene dine.
 Tid til å eksperimentere
For tiden er CSS Multiple Column Layout veldig godt støttet.Med prefikser ville over 94% av nettbrukerne kunne se disse stilene, og at den ikke støttede gruppen egentlig bare ville være mye eldre versjoner av Internet Explorer, som du kanskje ikke støtter lenger uansett.
Med dette nivået av støtte nå på plass, er det ingen grunn til ikke å begynne å eksperimentere med CSS-kolonner og distribuere disse stilene på produksjonsklare nettsteder. Du kan starte eksperimentene dine ved å bruke HTML og CSS som presenteres i denne artikkelen, og leke med forskjellige verdier for å se hva som ville fungere best for nettstedets layoutbehov.