Så här använder du CSS3-kolumner

Med ökande mångfald i bildskärmsstorlekar är det inte praktiskt att designa enskilda block av text som tar upp hela skärmens bredd. Den traditionella lösningen är att manuellt splittra text i kolumner, vilket är mycket tidskrävande. eller att dela upp text dynamiskt med JavaScript, vilket inte fungerar universellt. Dessutom är det här en presentationsfråga, vi borde kunna ställa den med CSS utan att använda nätsystem eller floats ska vi inte?

CSS3 ger dig en möjlighet att ställa in din text i olika kolumner, det ger även möjlighet att ställa in en rännare - mellanslaget mellan de här kolumnerna - så har du full kontroll istället för att ramverket eller rutnätet ställer in dessa luckor för dig .

Bäst av allt, CSS3 försämras graciöst, så om någon surfar i Netscape Navigator, kommer din webbplats inte att bryta.

Browser Support

Det är viktigt att notera att medan alla nuvarande webbläsare stöder flera kolumner i CSS3 - ja även IE10 - många nya versioner - t.ex. IE9 - inte. Även om supporten är bra, vill du inkludera webbläsarens prefix för webkit (-webkit-) och mozilla (-moz-). Det finns inget behov av att inkludera -ms- eller -o- för IE och Opera, eftersom de antingen stöder funktionen i sin helhet, eller inte alls.

Egenskaperna

Denna CSS-funktion ger dig en handfull egenskaper för att ge dig fullständig kontroll över hur ditt innehåll skrivs ut i webbläsaren och de här egenskaperna är:

• kolumnräkning: Här anger du antalet kolumner du vill tillämpa på elementet.
• kolumnbredd: bredden på en enda kolumn. Var medveten om att detta värde förmodligen kommer att ändras av webbläsaren.
• kolumnavstånd: gapets bredd mellan kolumnerna.
• kolumn-regelbredd: regeldelen är typ av en gräns för dina kolumner och här anger du bredden på den gränsen.
• kolumn-regel-stil: också som gränsen, om du behöver ange stilen.
• kolumn-regel-färg: här färgen på regeln.
• kolumn-spänning: värdet här kommer att berätta för webbläsaren hur många kolumner du vill ha ett element att spänna, det här är bra för rubriker och fungerar som colspan och rowspan i tabeller.

Med alla dessa egenskaper tror jag inte att vi faktiskt behöver något annat för att ha full kontroll över våra kolumner. Naturligtvis är inte alla dessa egenskaper nödvändiga för att multikolonnlayouten ska fungera. Det är egentligen bara kolumnräknningen nödvändigt men du bör alltid använda kolumnavståndet för att ge texten ett litet rum och inte ha alla kolumner på överst på varandra.

För att sätta detta i praktiken tar det bara två rader kod:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Om du också vill tillämpa en regel i kolumnerna behöver du bara lägga till de extra egenskaperna:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Som den vanligaste gränsenheten kan du också stapla färg, stil och bredd i samma linje, som så:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Om du har en rubrik och du vill ha den rubriken ska du spänna över alla kolumnerna du bara för att lägga till en rad:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

demo

Du kan tillämpa detta på praktiskt taget vilken som helst HTML, från en enda punkt till flera