Le module CSS Multi-column Layout est un outil puissant qui vous permet de créer facilement des mises en page multi-colonnes pour vos pages web. Avec l’essor du responsive design, il est important de comprendre comment utiliser ce module.
Vous pouvez utiliser les propriétés des colonnes pour créer des mises en page flexibles et dynamiques qui s’adaptent à différentes tailles d’écran.
Spécification du nombre, de la largeur et de l’espacement des colonnes
Pour créer une mise en page multi-colonnes appropriée au contenu de votre page, vous devez commencer par déterminer le nombre de colonnes que vous souhaitez voir s’étendre. L’une des propriétés les plus importantes du module Multi-colonnes est la propriété column-count qui permet de définir le nombre de colonnes dans lesquelles le contenu doit être divisé.
Par exemple :
.container {
column-count: 3;
}
Vous pouvez également spécifier la largeur et l’espacement des colonnes. Vous pouvez définir la valeur de la largeur de la colonne en utilisant l’une des unités CSS prises en charge, par exemple px, emou %.
Si largeur de colonne est fixé à autole navigateur calculera la largeur de chaque colonne en fonction de la valeur de l’option nombre de colonnes et l’espace disponible dans la mise en page.
Par exemple, ce CSS déclare 3 colonnes, chacune ayant une largeur de 200 pixels :
.container {
column-count: 3;
column-width: 200px;
}
Le écart entre les colonnes spécifie l’espace entre les colonnes d’une présentation multi-colonnes. Elle définit la taille des espaces vides entre les colonnes adjacentes et peut prendre une valeur de longueur en pixels, ems ou toute autre unité prise en charge.
Par exemple :
.container {
column-count: 3;
column-gap: 20px; /* sets the gap between columns to 20 pixels */
}
Par défaut, la valeur de espacement des colonnes est fixé à normal. Votre navigateur choisit cette valeur pour obtenir un espacement cohérent entre les colonnes de votre mise en page tout en restant agréable à l’œil. Cette valeur peut également varier d’un navigateur à l’autre et peut également dépendre de la taille de la police, de la hauteur des lignes, de la propriété de position et d’autres propriétés de mise en page du contenu des colonnes.
S’assurer de l’équilibre des colonnes
Les colonnes CSS tentent de remplir tout l’espace disponible dans une mise en page. Cela peut parfois se traduire par des colonnes de hauteurs très différentes, ce qui donne un aspect inégal à la mise en page.
Pour équilibrer les colonnes, vous devez vous assurer que chaque colonne de votre mise en page a approximativement la même quantité de contenu.
Vous pouvez y parvenir en définissant le paramètre CSS column-fill propriété à équilibre. Un navigateur tentera alors de répartir le contenu de manière égale sur toutes les colonnes afin qu’elles aient à peu près la même hauteur.
Le colonne-remplissage est fixée à équilibre par défaut, mais une valeur de auto modifie ce comportement. L’utilisation d’auto distribue le contenu sur les colonnes en fonction de l’espace disponible. Il peut en résulter un espacement inégal entre les colonnes et des hauteurs de colonnes inégales. Cela peut même produire une mise en page avec des colonnes vides.
Voici un exemple d’utilisation de la fonction colonne-remplissage propriété permettant d’équilibrer les colonnes dans une mise en page multi-colonnes :
.multi-column-layout {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
Dans cet exemple, nous avons une mise en page multi-colonnes avec trois colonnes et un espace de 20 pixels entre chaque colonne. En définissant la propriété column-fill propriété à équilibreAvec l’option « Balance », nous nous assurons que le contenu est réparti uniformément sur les colonnes, ce qui permet d’obtenir des hauteurs de colonnes équilibrées.
Il est important de noter que l’option column-fill peut ne pas fonctionner correctement pour toutes les mises en page et peut entraîner un espacement inégal entre les colonnes. Dans ce cas, vous devrez peut-être utiliser JavaScript pour équilibrer manuellement les colonnes. N’oubliez pas de suivre les meilleures pratiques et d’utiliser l’amélioration progressive afin de ne pas dépendre de JavaScript.
Assembler le tout
Vous pouvez rassembler tout ce que vous avez appris sur la mise en œuvre d’une mise en page avec des colonnes CSS et l’utiliser pour créer une mise en page de style magazine.
Tout d’abord, créez la structure HTML de base. Utilisez un élément conteneur pour envelopper votre contenu, puis créez plusieurs éléments enfants que vous pouvez ensuite mettre en page en colonnes.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSScolumns.css" />
</head>
<body>
<!-- Container Element -->
<div class="magazine-layout">
<!-- Child Elements -->
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
</div>
</body>
</html>
Pour créer une mise en page de style magazine à l’aide du module CSS Multi-column, combinez les éléments column-count, largeur de colonne, espacement des colonneset colonne-remplissage propriétés :
.magazine-layout {
column-count: 3;
column-width: 300px;
column-gap: 20px;
column-fill: balance;
}
.article {
background-color: #f8f8f8;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
break-inside: avoid-column;
}
Cet exemple définit également l’élément intrusion dans l’intérieur propriété sur le .article avec une valeur de éviter les colonnes. Cette propriété permet de s’assurer que chaque article reste dans une seule colonne, au lieu d’être réparti sur plusieurs colonnes. Voici à quoi devrait ressembler la mise en page :
Utiliser des fallbacks pour les navigateurs non supportés
Il est important de noter que l’option column-count n’est pas prise en charge par tous les navigateurs. Les navigateurs qui ne prennent pas en charge la propriété column-countaffiche le contenu dans une seule colonne.
Pour fournir des styles de remplacement pour les navigateurs non pris en charge, vous pouvez utiliser des requêtes de fonctionnalités telles que @supports pour détecter la prise en charge de la column-count et fournir des styles alternatifs lorsque la propriété n’est pas supportée.
Par exemple :
.container {
/* Fallback for browsers that do not support column-count */
width: 100%;
}
/* Detect support for column-count */
@supports (column-count: 3) {
.container {
column-count: 3;
}
}
Dans cet exemple, nous utilisons la méthode @supports Requête de fonctionnalité pour détecter la prise en charge de la comptage de colonnes propriété. Si le navigateur prend en charge le column-count, la propriété conteneur s’affichera sur trois colonnes. Si le navigateur ne prend pas en charge le comptage des colonnes, il affichera le contenu sur une seule colonne à l’aide de l’attribut largeur propriété.
Diviser le contenu en colonnes
Dans l’ensemble, les colonnes CSS constituent un moyen pratique et puissant de créer des mises en page multi-colonnes flexibles et réactives qui améliorent la convivialité et l’expérience utilisateur du contenu web.
En utilisant conjointement les colonnes CSS et JavaScript, vous pouvez créer des mises en page encore plus sophistiquées et dynamiques qui s’adaptent aux différentes préférences des utilisateurs et à la taille des appareils, rendant ainsi votre contenu web plus accessible et plus attrayant pour vos utilisateurs.
