CSS-kolommen gebruiken voor websitelay-outs met meerdere kolommen

click fraud protection

Voor vele jaren, CSS zweeft zijn een kieskeurig, maar noodzakelijk onderdeel geweest bij het maken van websitelay-outs. Als je ontwerp meerdere kolommen nodig had, ging je naar drijvers. Het probleem met deze methode is dat, ondanks de ongelooflijke vindingrijkheid die webdesigners/-ontwikkelaars hebben getoond bij het maken van een complexe site lay-outs, waren CSS-drijvers nooit echt bedoeld om op deze manier te worden gebruikt.

Hoewel floats en CSS-positionering zeker nog vele jaren een plaats zullen krijgen in webdesign, is een nieuwere lay-out technieken zoals CSS Grid en Flexbox geven webdesigners nu nieuwe manieren om hun sitelay-outs te creëren. Een andere nieuwe lay-outtechniek die veel potentieel laat zien, is CSS Multiple Columns.

CSS-kolommen bestaan ​​​​nu al een paar jaar, maar gebrek aan ondersteuning in oudere browsers (voornamelijk oudere versies van Internet Explorer) heeft veel webprofessionals ervan weerhouden deze stijlen in hun productie te gebruiken werk.

Met het einde van de ondersteuning voor die oudere versies van IE, experimenteren sommige webontwerpers nu met een nieuwe CSS-lay-out opties, inclusief CSS-kolommen, en ontdekken dat ze zoveel meer controle hebben met deze nieuwe benaderingen dan met they drijft.

instagram viewer

De basis van CSS-kolommen

Zoals de naam al doet vermoeden, CSS Multiple Columns (ook bekend als CSS3 lay-out met meerdere kolommen) stelt u in staat om inhoud in een bepaald aantal kolommen te splitsen. De meest elementaire CSS-eigenschappen die u zou gebruiken zijn:

  • kolomtelling
  • kolom-gap

Voor het aantal kolommen geeft u het gewenste aantal kolommen op. De kolomopening zou de goten of afstand tussen die kolommen zijn. De browser neemt deze waarden en verdeelt de inhoud gelijkmatig in het aantal kolommen dat u opgeeft.

Een veelvoorkomend voorbeeld van CSS met meerdere kolommen in de praktijk is het splitsen van een blok tekstinhoud in meerdere kolommen, vergelijkbaar met wat u in een krantenartikel zou zien. Stel dat u de volgende HTML-opmaak hebt (merk op dat we bijvoorbeeld alleen het begin van hebben gezet: één alinea, terwijl er in de praktijk waarschijnlijk meerdere alinea's met inhoud in deze opmaak zouden zitten):


De kop van je artikel.

Stelt u zich eens een heleboel alinea's tekst voor hier...


Als je vervolgens deze CSS-stijlen hebt geschreven:

.inhoud {
-moz-kolom-telling: 3;
-webkit-kolom-telling: 3;
aantal kolommen: 3;
-moz-kolom-gap: 30px;
-webkit-kolom-gap: 30px;
kolomopening: 30px;
}

Deze CSS-regel zou de indeling "inhoud" in 3 gelijke kolommen splitsen met een tussenruimte van 30 pixels ertussen. Als u twee kolommen in plaats van drie wilt, wijzigt u die waarde en de browser berekent de nieuwe breedte van die kolommen om de inhoud gelijkmatig te verdelen. Merk op dat we eerst de vendor-prefixed eigenschappen gebruiken, gevolgd door de non-prefixed declaraties.

Hoe eenvoudig dit ook is, het gebruik ervan op deze manier is twijfelachtig voor websitegebruik. Ja, je kunt een heleboel inhoud in meerdere kolommen splitsen, maar dit is misschien niet de beste lezing ervaring voor het web, vooral als de hoogte van deze kolommen onder de "vouw" van de scherm.

Lezers zouden dan op en neer moeten scrollen om de volledige inhoud te lezen. Toch is het principe van CSS Columns net zo eenvoudig als je hier ziet, en het kan worden gebruikt om zoveel meer te doen dan alleen de inhoud van enkele alinea's te splitsen - het kan inderdaad worden gebruikt voor lay-out.

Lay-out met CSS-kolommen

Stel dat u een webpagina heeft met een inhoudsgebied met 3 kolommen met inhoud. Dit is een veel voorkomende website-indeling en om die 3 kolommen te bereiken, zou u normaal gesproken de divisies laten zweven. Met CSS met meerdere kolommen is het zoveel gemakkelijker.

Hier is wat voorbeeld-HTML:


Van onze blog.

Inhoud zou hier komen ...


Aankomende evenementen.

Inhoud zou hier komen ...


De CSS om deze meerdere kolommen te maken begint met wat je eerder zag:

.inhoud {
-moz-kolom-telling: 3;
-webkit-kolom-telling: 3;
aantal kolommen: 3;
-moz-kolom-gap: 30px;
-webkit-kolom-gap: 30px;
kolomopening: 30px;
}

De uitdaging hier is dat de browser deze inhoud gelijkmatig wil verdelen, dus als de inhoudslengte van deze onderverdelingen anders is, zal die browser de inhoud van een individuele verdeling, het begin ervan toevoegen aan de ene kolom en dan verder gaan in een andere (je kunt dit zien door deze code te gebruiken om een ​​experiment uit te voeren en verschillende lengtes van inhoud toe te voegen aan elke kolom divisie).

Dat is niet wat je wilt. U wilt dat elk van deze divisies een afzonderlijke kolom maakt en, hoe groot of klein de inhoud van een afzonderlijke divisie ook is, u wilt nooit dat deze wordt gesplitst. U kunt dit bereiken door deze ene extra CSS-regel toe te voegen:

.inhoud div {
weergave: inline-blok;
}

Dit dwingt de divisies die zich binnen de "inhoud" bevinden om intact te blijven, zelfs als de browser dit in meerdere kolommen splitst. Sterker nog, aangezien we hier niets een vaste breedte hebben gegeven, zullen deze kolommen automatisch van grootte veranderen als de browser het formaat aanpast, waardoor ze een ideale toepassing zijn voor responsieve websites. Met die "inline-block" -stijl op zijn plaats, zal elk van uw 3 divisies een afzonderlijke kolom met inhoud zijn.

Kolombreedte gebruiken

Er is nog een eigenschap naast "kolommentelling" die u kunt gebruiken, en afhankelijk van uw lay-outbehoeften, kan dit zelfs een betere keuze zijn voor uw site. Dit is "kolombreedte". Met dezelfde HTML-opmaak als eerder getoond, zouden we dit in plaats daarvan met onze CSS kunnen doen:

.inhoud {
-moz-kolombreedte: 500px;
-webkit-kolombreedte: 500px;
kolombreedte: 500px;
-moz-kolom-gap: 30px;
-webkit-kolom-gap: 30px;
kolomopening: 30px;
}
.inhoud div {
weergave: inline-blok;
}

De manier waarop dit werkt, is dat de browser deze "kolombreedte" gebruikt als de maximale waarde van die kolom. Dus als het browservenster minder dan 500 pixels breed is, zouden deze 3 onderverdelingen in een enkele kolom verschijnen, de ene boven de andere. Dit is een typische lay-out die wordt gebruikt voor mobiele / kleine schermlay-outs.

Naarmate de browserbreedte groter wordt zodat deze groot genoeg is om in 2 kolommen te passen, samen met de opgegeven kolomopeningen, gaat de browser automatisch van een enkele kolomlay-out naar twee kolommen. Blijf de schermbreedte vergroten en uiteindelijk krijgt u een ontwerp met 3 kolommen, waarbij elk van onze 3 divisies in hun eigen kolom wordt weergegeven. Nogmaals, dit is een geweldige manier om wat responsieve, geschikt voor meerdere apparaten lay-outs, en je hoeft het niet eens te gebruiken mediaquery's om de lay-outstijlen te wijzigen!

Andere kolomeigenschappen

Naast de eigenschappen die hier worden behandeld, zijn er ook eigenschappen voor "kolomregel", inclusief kleur-, stijl- en breedtewaarden waarmee u regels tussen uw kolommen kunt maken. Deze zouden in plaats van randen worden gebruikt als u enkele lijnen wilt hebben die uw kolommen scheiden.

Tijd om te experimenteren

Momenteel wordt CSS Multiple Column Layout zeer goed ondersteund. Met voorvoegsels zou meer dan 94% van de webgebruikers deze stijlen kunnen zien, en die niet-ondersteunde groep zou eigenlijk gewoon veel oudere versies van Internet Explorer zijn die toch niet meer worden ondersteund.

Nu dit niveau van ondersteuning aanwezig is, is er geen reden om niet te gaan experimenteren met CSS-kolommen en deze stijlen te implementeren in productieklare websites. U kunt uw experimenten starten met behulp van de HTML en CSS die in dit artikel worden gepresenteerd en met verschillende waarden spelen om te zien wat het beste werkt voor de lay-outbehoeften van uw site.

instagram story viewer