Petite astuce le module CSS3 à plusieurs colonnes

Depuis plus de six ans, les colonnes CSS3 sont à notre disposition. pourtant, étrangement, ils sont rarement utilisés. Comme ils ne sont actuellement pris en charge que par les navigateurs basés sur Mozilla et Webkit, cela signifie qu’à nouveau, aucune prise en charge dans Internet Explorer. Mais ça va! Le monde ne se terminera pas si les utilisateurs d'IE voient un paragraphe plus long. Je vais vous montrer comment utiliser ce module utile dans la pointe de la vidéo d'aujourd'hui.


Abonnez-vous à notre page YouTube pour voir tous les tutoriels vidéo!

Préfère regarder cette vidéo sur Screenr?

 #container p -webkit-column-count: 3; -webkit-colonne-gap: 10px; -moz-column-count: 3; -moz-colonne-gap: 10px; nombre de colonnes: 3; écart de colonne: 10 px; 

  • nombre de colonnes: Le nombre de colonnes souhaité pour l'élément.
  • écart de colonne: Le remplissage entre chaque colonne.
  • règle de colonne: Le diviseur pour chaque colonne; peut être utilisé pour spécifier une bordure.
  • largeur de colonne: Utilisé pour indiquer spécifiquement la largeur de chaque colonne.

Veuillez noter que nous devons préfixer chaque propriété avec le -webkit ou -moz, en conséquence; donc: -webkit-column-count.

Utilisez-vous des colonnes CSS dans vos projets? Si non, pourquoi pas?