Snelle tip de CSS3-module met meerdere kolommen

Al meer dan zes jaar zijn er CSS3-kolommen beschikbaar voor ons; maar toch, vreemd genoeg, worden ze zelden gebruikt. Omdat ze momenteel alleen worden ondersteund in Mozilla en op Webkit gebaseerde browsers, betekent dit dat - alweer - geen ondersteuning is in Internet Explorer. Maar dat is oke! De wereld eindigt niet als IE-gebruikers één langere alinea zien. Ik zal je laten zien hoe je deze handige module kunt gebruiken in de snelle videotip van vandaag.

Abonneer u op onze YouTube-pagina om alle videozelfstudies te bekijken!

Bekijk deze video liever op Screenr?

 #container p -webkit-kolom-telling: 3; -webkit-column-gap: 10px; -moz-kolom-telling: 3; -moz-column-gap: 10px; kolom aantal: 3; kolomafstand: 10px; 

---

• column-count: Het gewenste aantal kolommen voor het element.
• kolom-gap: De opvulling tussen elke kolom.
• kolom-regel: De verdeler voor elke kolom; kan worden gebruikt om een ​​rand op te geven.
• kolombreedte: Gebruikt om specifiek de breedte van elke kolom te vermelden.

Houd er rekening mee dat we elke eigenschap moeten prefixen met de -webkit of -moz, dienovereenkomstig; dus: -webkit-kolom-telling.

Gebruikt u CSS-kolommen in uw projecten? Zo nee, waarom niet?