Slik bruker du CSS-kolonner for nettstedsoppsett med flere kolonner

InnholdsfortegnelseUtvide

• Grunnleggende om CSS-kolonner
• Layout med CSS-kolonner
• Bruke kolonnebredde
• Andre kolonneegenskaper
• Tid for å eksperimentere

I mange år, CSS flyter har vært en kresen, men nødvendig, komponent i å lage nettstedoppsett. Hvis designet ditt 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 nettsteder oppsett , CSS-flytere var egentlig aldri ment å brukes på denne måten.

Mens flyter og CSS-posisjonering garantert vil ha en plass i webdesign i mange år framover, gir nyere layoutteknikker, inkludert CSS Grid og Flexbox, nå webdesignere nye måter å lage nettstedoppsettene sine 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 hindret mange nettfagfolk fra å bruke disse stilene i produksjonsarbeidet.

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

Grunnleggende om CSS-kolonner

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

• kolonneantall
• kolonne-gap

For kolonnetelling angir du antall kolonner du ønsker. Søylegapet vil være rennene eller avstanden mellom disse søylene. Nettleseren tar disse verdiene og deler innholdet jevnt i antall kolonner du angir.

Et vanlig eksempel på flere CSS-kolonner i praksis vil være å dele en blokk med tekstinnhold i flere kolonner, lik det du vil se i en avisartikkel. La oss si at du har følgende HTML-oppmerking (merk at vi for eksempel bare har satt starten på ett avsnitt, mens det i praksis sannsynligvis vil være flere avsnitt med innhold i denne markeringen):

|_+_|
Overskriften til artikkelen din

Tenk deg mange avsnitt med tekst her...

Hvis du så skrev disse CSS-stilene:

|_+_|

Denne CSS-regelen vil dele innholdsdelingen i 3 like kolonner med et gap på 30 piksler mellom dem. Hvis du ville ha to kolonner i stedet for 3, ville du ganske enkelt endre den verdien og nettleseren ville beregne de nye breddene på disse kolonnene for å dele innholdet jevnt. Legg merke til at vi bruker egenskapene med leverandørprefiks først, etterfulgt av erklæringer uten prefiks.

Så enkelt som dette er, er bruken på denne måten tvilsom for nettstedbruk. Ja, du kan dele en haug med innhold i flere kolonner, men dette er kanskje ikke den beste leseopplevelsen for nettet, spesielt hvis høyden på disse kolonnene faller under brettingen av skjermen.

Leserne må da bla opp og ned for å lese hele innholdet. Likevel er prinsippet for CSS Columns like enkelt som du ser her, og det kan brukes til å gjøre så mye mer enn bare å dele innholdet i noen 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 vanlig nettstedsoppsett, og for å oppnå disse 3 kolonnene, vil du normalt flyte divisjonene som er i. Med CSS-flere kolonner er det så mye enklere.

Her er litt HTML-eksempel:

|_+_|

Fra bloggen vår

Innholdet vil gå her...

Kommende arrangementer

Innholdet vil gå her...

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

|_+_|

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

Det er ikke det du ønsker. Du vil at hver av disse divisjonene skal lage en distinkt kolonne, og uansett hvor stort eller lite innholdet til en individuell avdeling kan være, vil du aldri at det skal deles. Du kan oppnå dette ved å legge til denne en ekstra linjen med CSS:

|_+_|

Dette vil tvinge de inndelingene som er inne i innholdet til å forbli intakte selv om nettleseren deler dette opp i flere kolonner. Enda bedre, siden vi ikke ga noe her en fast bredde, vil disse kolonnene automatisk endre størrelse når nettleseren endrer størrelse, noe som gjør dem til et ideelt program for responsive nettsider . Med den inline-blokk-stilen på plass, vil hver av de tre divisjonene dine 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 layoutbehovene dine, kan det faktisk være et bedre valg for nettstedet ditt. Dette er kolonnebredde. Ved å bruke samme HTML-oppmerking som vist tidligere, kan vi i stedet gjøre dette med vår CSS:

|_+_|

Måten dette fungerer på er at nettleseren bruker denne kolonnebredden som maksimumsverdien for den kolonnen. Så hvis nettleservinduet er mindre enn 500 piksler bredt, vil disse tre inndelingene vises i én enkelt kolonne, den ene på toppen av den andre. Dette er en typisk layout som brukes for mobil/småskjermoppsett.

Ettersom nettleserbredden øker til å være stor nok til å passe 2 kolonner sammen med de spesifiserte kolonneavstandene, vil nettleseren automatisk gå fra et enkelt kolonneoppsett til to kolonner. Fortsett å øke skjermbredden, og til slutt vil du få et design med 3 kolonner, med hver av våre 3 avdelinger vist i hver sin kolonne. Igjen, dette er en fin måte å få litt respons på, multi-enhet vennlig oppsett, og du trenger ikke engang å bruke medieforespørsler for å endre layoutstilene!

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 kantlinjer hvis du vil ha noen linjer som skiller kolonnene dine.

Tid for å eksperimentere

Foreløpig støttes CSS Multiple Column Layout veldig godt. 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 ved å bruke HTML og CSS presentert i denne artikkelen og leke med forskjellige verdier for å se hva som fungerer best for nettstedets layoutbehov.