CSS Multi-column Layout-modulen er et kraftig verktøy som lar deg enkelt lage multi-column layouts for websidene dine. Fremveksten av responsiv design betyr at det er viktig å forstå hvordan du bruker denne modulen.
Du kan bruke kolonneegenskaper for å lage fleksible og dynamiske oppsett som tilpasser seg forskjellige skjermstørrelser.
Spesifisere kolonnenummer, bredde og gap
For å lage et passende oppsett med flere kolonner for sideinnholdet ditt, bør du begynne med å bestemme hvor mange kolonner du vil at det skal spenne over. En av de viktigste egenskapene i Multi-column-modulen er kolonneantall egenskap, som du bruker til å angi antall kolonner som innholdet skal deles inn i.
For eksempel:
.container {
kolonneantall: 3;
}
Du kan også spesifisere bredden og gapet til kolonnene. Du kan angi kolonnebreddeverdien ved å bruke hvilken som helst av de støttede CSS-enhetene som px, em, eller %.
Hvis kolonnebredde er satt til auto, vil nettleseren beregne bredden på hver kolonne basert på kolonneantall eiendommen og den tilgjengelige plassen inne i layouten din.
For eksempel erklærer denne CSS 3 kolonner, hver med en bredde på 200 piksler:
.container {
kolonneantall: 3;
kolonnebredde: 200px;
}
De kolonne-gap egenskapen spesifiserer gapet, eller mellomrommet, mellom kolonnene i et flerkolonneoppsett. Den vil angi størrelsen på tomme mellomrom mellom tilstøtende kolonner og kan ta en lengdeverdi i piksler, ems eller andre støttede enheter.
For eksempel:
.container {
kolonneantall: 3;
kolonne-gap: 20px; /* setter gapet mellom kolonnene til 20 piksler */
}
Som standard er verdien av kolonne-gap er satt til normal. Nettleseren din velger denne verdien for å oppnå konsistent avstand mellom kolonnene i oppsettet, samtidig som den forblir visuelt tiltalende. Denne verdien kan også variere mellom nettlesere og kan også avhenge av skriftstørrelse, linjehøyde, posisjon eiendom, og andre layoutegenskaper for innholdet i kolonnene.
Sørge for at kolonner balanserer
CSS-kolonner prøver å fylle opp all tilgjengelig plass i en layout. Dette kan noen ganger resultere i kolonner som har betydelig forskjellige høyder, noe som gjør at oppsettet ser ujevnt ut.
For å balansere kolonner, bør du sørge for at hver kolonne i layouten din har omtrent samme mengde innhold.
Du kan oppnå dette ved å angi CSS kolonnefylling eiendom til balansere. En nettleser vil da forsøke å fordele innholdet jevnt over alle kolonnene slik at de har omtrent samme høyde.
De kolonnefylling egenskapen er satt til balansere som standard, men en verdi på auto vil endre denne oppførselen. Ved å bruke auto distribueres innholdet på tvers av kolonner basert på tilgjengelig plass. Dette kan resultere i ujevn avstand mellom søyler og ujevn søylehøyde. Det kan til og med produsere et oppsett med tomme kolonner.
Her er et eksempel på hvordan du bruker kolonnefylling egenskap for å balansere kolonner i et flerkolonneoppsett:
.multi-column-layout {
kolonneantall: 3;
kolonne-gap: 20px;
kolonnefylling: balansere;
}
I dette eksemplet har vi et flerkolonneoppsett med tre kolonner og et gap på 20 piksler mellom hver kolonne. Ved å stille inn kolonnefylling eiendom til balansere, sørger vi for at innholdet fordeler seg jevnt over kolonnene, noe som resulterer i balanserte kolonnehøyder.
Det er viktig å merke seg at kolonnefylling egenskapen fungerer kanskje ikke bra for alle oppsett og kan føre til ujevn avstand mellom kolonnene. I slike tilfeller må du kanskje bruke JavaScript for å balansere kolonnene manuelt. Husk å følge beste praksis og bruk progressiv forbedring slik at du ikke stoler på JavaScript.
Sette alt sammen
Du kan samle alt du har lært om å implementere en layout med CSS-kolonner og bruke den til å lage en layout i magasinstil.
Lag først den grunnleggende HTML-strukturen. Bruk et beholderelement til å pakke inn innholdet ditt, og lag deretter flere underordnede elementer som du deretter kan sette opp i kolonner.
html>
<html>
<hode>
<linkrel="stilark"href="CSScolumns.css" />
hode>
<kropp>
Beholderelement
<divklasse="magasinoppsett">Barneelementer
<divklasse="artikkel">
<h2>Artikkeltittelh2><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed inn
magna vel lorem pharetra bibendum.s>
div><divklasse="artikkel">
<h2>Artikkeltittelh2><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed inn
magna vel lorem pharetra bibendum.s>
div><divklasse="artikkel">
<h2>Artikkeltittelh2><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed inn
magna vel lorem pharetra bibendum.s>
div>
div>
kropp>
html>
For å lage en layout i magasinstil ved å bruke CSS Multi-column-modulen, kombiner kolonneantall, kolonnebredde, kolonne-gap, og kolonnefylling egenskaper:
.magasin-layout {
kolonneantall: 3;
kolonnebredde: 300px;
kolonne-gap: 20px;
kolonnefylling: balansere;
}
.artikkel {
bakgrunnsfarge: #f8f8f8;
grense-radius: 4px;
boks-skygge: 0 2px 4pxrgba(0, 0, 0, 0.1);
polstring: 10px;
innbrudd: unngå-kolonne;
}
Dette eksemplet definerer også innbrudd eiendom på .artikkel klasse, med en verdi på unngå-kolonne. Egenskapen sikrer at hver artikkel forblir innenfor en enkelt kolonne, i stedet for å dele opp på flere kolonner. Slik skal oppsettet se ut:
Bruke fallbacks for nettlesere som ikke støttes
Det er viktig å merke seg at kolonneantall egenskapen støttes ikke i alle nettlesere. Nettlesere som ikke støtter kolonneantall, vil vise innholdet i en enkelt kolonne i stedet.
For å gi reservestiler for nettlesere som ikke støttes, kan du bruke funksjonsspørringer som @støtter for å oppdage støtte for kolonneantall eiendom og gi alternative stiler når egenskapen ikke støttes.
For eksempel:
.container {
/* Tilbakeslag for nettlesere som ikke støtter kolonnetelling */
bredde: 100%;
}
/* Finn støtte for kolonnetelling */
@støtter (kolonneantall:3) {
.container {
kolonneantall: 3;
}
}
I dette eksemplet bruker vi @støtter funksjonsspørring for å oppdage støtte for kolonneantall eiendom. Hvis nettleseren støtter kolonnetelling, container elementet vises i tre kolonner. Hvis nettleseren ikke støtter kolonnetelling, vil den vise innholdet i en enkelt kolonne ved hjelp av bredde eiendom.
Bryte innhold inn i kolonner
Totalt sett gir CSS-kolonner en praktisk og kraftig måte å lage fleksible og responsive flerkolonneoppsett som forbedrer brukervennligheten og brukeropplevelsen til nettinnhold.
Ved å bruke CSS-kolonner og JavaScript sammen, kan du lage enda mer sofistikerte og dynamiske oppsett som tilpasser seg til forskjellige brukerpreferanser og enhetsstørrelser, noe som gjør nettinnholdet ditt mer tilgjengelig og engasjerende for brukerne dine.
