Hvordan bruke CSS-kolonner for nettstedsoppsett med flere kolonner

click fraud protection

I mange år, CSS flyter har vært en kinkig, men likevel nødvendig, komponent i å lage nettstedsoppsett. Hvis designet ditt krevde flere kolonner, vendte du deg til flyter. Problemet med denne metoden er at, til tross for den utrolige oppfinnsomheten som webdesignere / utviklere har vist når de lager komplekse nettsteder oppsett, CSS-flottører var egentlig ikke ment å bli brukt på denne måten.

Mens flyter og CSS-posisjonering sikkert vil ha en plass i webdesign i mange år fremover, nyere layout teknikker, inkludert CSS Grid og Flexbox, gir nå webdesignere nye måter å lage 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 profesjonelle på nettet fra å bruke disse stilene i sin produksjon arbeid.

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

instagram viewer

Grunnleggende om CSS-kolonner

Som navnet antyder, CSS Flere kolonner (også kjent som CSS3 flerkolonnelayout) lar deg dele innhold i et angitt antall kolonner. De mest grunnleggende CSS-egenskapene du vil bruke er:

  • kolonnetelling
  • kolonnegap

For kolonnetelling spesifiserer du antall kolonner du vil ha. Kolonnegapet vil være takrennene eller avstanden mellom disse kolonnene. Nettleseren tar disse verdiene og deler innholdet jevnt i antall kolonner du angir.

Et vanlig eksempel på CSS flere kolonner i praksis vil være å dele en blokk med tekstinnhold i flere kolonner, i likhet med hva du ser i en avisartikkel. Si at du har følgende HTML-markering (merk at vi for eksempel bare har startet ett avsnitt, mens det i praksis sannsynligvis vil være flere avsnitt med innhold i denne markeringen):


Overskriften til artikkelen din.

Tenk deg mange tekstavsnitt her ...


Hvis du da skrev disse CSS-stilene:

.innhold {
-moz-kolonnetall: 3;
-webkit-kolonnetall: 3;
kolonnetall: 3;
-moz-kolonne-gap: 30px;
-webkit-kolonne-gap: 30px;
kolonne-gap: 30px;
}

Denne CSS-regelen vil dele "innhold" -delingen i 3 like kolonner med et mellomrom på 30 piksler mellom seg. Hvis du ville ha to kolonner i stedet for 3, ville du bare endre den verdien, og nettleseren ville beregne de nye bredden på disse kolonnene for å dele innholdet jevnt. Legg merke til at vi bruker de forhandler-prefikserte egenskapene først, etterfulgt av de ikke-prefikserte deklarasjonene.

Så enkelt som dette er, er bruken på denne måten tvilsom for nettstedsbruk. Ja, du kan dele en mengde innhold i flere kolonner, men dette er kanskje ikke den beste lesningen opplevelse for nettet, spesielt hvis høyden på disse kolonnene faller under "brettet" på skjerm.

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

Oppsett med CSS-kolonner

Si at du har en webside med et innholdsområde som har tre kolonner med innhold. Dette er et veldig vanlig nettstedoppsett, og for å oppnå de tre kolonnene, vil du normalt flyte divisjonene som er i. Med CSS flere kolonner er det så mye enklere.

Her er noen eksempler på HTML:


Fra bloggen vår.

Innholdet vil gå her ...


Kommende arrangementer.

Innholdet vil gå her ...


CSS for å lage disse flere kolonnene starter med det du så tidligere:

.innhold {
-moz-kolonnetall: 3;
-webkit-kolonnetall: 3;
kolonnetall: 3;
-moz-kolonne-gap: 30px;
-webkit-kolonne-gap: 30px;
kolonne-gap: 30px;
}

Nå er utfordringen her at nettleseren vil dele dette innholdet jevnt, så hvis innholdslengden til disse divisjonene er forskjellig, vil nettleseren faktisk dele innholdet i en individuell inndeling, legge starten til den i en kolonne og deretter fortsette til en annen (du kan se dette ved å bruke denne koden til å kjøre et eksperiment og legge til forskjellige lengder på innholdet i hver inndeling).

Det er ikke det du vil ha. Du vil at hver av disse divisjonene skal opprette en distinkt kolonne, og uansett hvor stort eller lite en enkelt divisjons innhold kan være, vil du aldri at den skal deles. Du kan oppnå dette ved å legge til en ekstra linje med CSS:

.innhold div {
display: inline-block;
}

Dette vil tvinge de delingene som er inne i "innholdet" til å forbli intakte, selv om nettleseren deler dette i flere kolonner. Enda bedre, siden vi ikke ga noe her en fast bredde, vil disse kolonnene automatisk endre størrelse når nettleseren endres, noe som gjør dem til et ideelt program for responsive nettsteder. Med den "inline-block" -stilen på plass, vil hver av dine tre divisjoner være en distinkt kolonne med innhold.

Bruke kolonnebredde

Det er en annen egenskap i tillegg til "kolonnetelling" som du kan bruke, og avhengig av layoutbehovet ditt, kan det faktisk være et bedre valg for nettstedet ditt. Dette er "kolonnebredde". Ved å bruke den samme HTML-markeringen som vist tidligere, kan vi i stedet gjøre dette med CSS:

.innhold {
-moz-kolonne-bredde: 500px;
-webkit-kolonne-bredde: 500px;
kolonnebredde: 500 px;
-moz-kolonne-gap: 30px;
-webkit-kolonne-gap: 30px;
kolonne-gap: 30px;
}
.innhold div {
display: inline-block;
}

Måten dette fungerer på er at nettleseren bruker denne "kolonnebredden" som den maksimale verdien for den kolonnen. Så hvis nettleservinduet er mindre enn 500 piksler bredt, vil disse tre divisjonene vises i en enkelt kolonne, en på toppen av en annen. Dette er en typisk layout som brukes for mobile / småskjermoppsett.

Når nettleserbredden øker til å være stor nok til å passe to kolonner sammen med de angitte kolonnelommene, vil nettleseren automatisk gå fra en enkelt kolonneoppsett til to kolonner. Fortsett å øke skjermbredden, og til slutt får du et design med 3 kolonner, med hver av våre 3 divisjoner vist i sin egen kolonne. Igjen, dette er en fin måte å bli litt lydhør over, vennlig for flere enheter oppsett, og du trenger ikke engang å bruke mediespørsmål for å endre layoutstiler!

Andre kolonneegenskaper

I tillegg til egenskapene som dekkes 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 for å eksperimentere

Foreløpig støttes CSS Multiple Column Layout. Med prefikser ville over 94% av nettbrukere kunne se disse stilene, og den gruppen som ikke støttes, ville egentlig bare være mye eldre versjoner av Internet Explorer som ikke støttes lenger uansett.

Med dette støttenivået 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 hjelp av HTML og CSS som er presentert i denne artikkelen, og spille med forskjellige verdier for å se hva som passer best for nettstedsoppsettbehovet ditt.

instagram story viewer