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. L'essor de la conception réactive signifie qu'il est important de comprendre comment utiliser ce module.
Vous pouvez utiliser les propriétés de colonne pour créer des mises en page flexibles et dynamiques qui s'adaptent à différentes tailles d'écran.
Spécification du numéro de colonne, de la largeur et de l'espace
Pour créer une mise en page multi-colonnes appropriée pour le contenu de votre page, vous devez commencer par décider du nombre de colonnes que vous souhaitez qu'elle s'étende. L'une des propriétés les plus importantes du module multi-colonnes est la nombre de colonnes propriété, que vous utilisez pour définir le nombre de colonnes dans lesquelles diviser le contenu.
Par exemple:
.récipient {
nombre de colonnes: 3;
}
Vous pouvez également spécifier la largeur et l'écart des colonnes. Vous pouvez définir la valeur de largeur de colonne à l'aide de l'un des les unités CSS prises en charge comme pixels, em, ou %.
Si largeur de colonne est réglé sur auto, le navigateur calculera la largeur de chaque colonne en fonction de la nombre de colonnes propriété et l'espace disponible à l'intérieur de votre mise en page.
Par exemple, ce CSS déclare 3 colonnes, chacune d'une largeur de 200 pixels :
.récipient {
nombre de colonnes: 3;
largeur de colonne: 200pixels;
}
Le écart de colonne La propriété spécifie l'écart, ou l'espace, entre les colonnes dans une mise en page à plusieurs colonnes. Il définira 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:
.récipient {
nombre de colonnes: 3;
écart de colonne: 20pixels; /* définit l'espace entre les colonnes à 20 pixels */
}
Par défaut, la valeur de écart de colonne est réglé sur normal. Votre navigateur choisit cette valeur pour obtenir un espacement constant entre les colonnes de votre mise en page tout en restant visuellement agréable. Cette valeur peut également varier d'un navigateur à l'autre et peut également dépendre de la taille de la police, de la hauteur de ligne, propriété de position, et d'autres propriétés de disposition du contenu des colonnes.
S'assurer de l'équilibre des colonnes
Les colonnes CSS essaient de remplir tout l'espace disponible dans une mise en page. Cela peut parfois entraîner des colonnes de hauteurs très différentes, ce qui rend la disposition inégale.
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 CSS remplissage de colonne propriété à équilibre. Un navigateur tentera alors de répartir le contenu uniformément sur toutes les colonnes afin qu'elles aient à peu près la même hauteur.
Le remplissage de colonne la propriété est définie sur équilibre par défaut, mais une valeur de auto changera ce comportement. L'utilisation de l'auto distribue le contenu sur les colonnes en fonction de l'espace disponible. Cela peut entraîner un espacement irrégulier entre les colonnes et des hauteurs de colonne inégales. Il peut même produire une mise en page avec des colonnes vides.
Voici un exemple d'utilisation du remplissage de colonne propriété pour équilibrer les colonnes dans une mise en page multi-colonnes :
.multi-column-layout {
nombre de colonnes: 3;
écart de colonne: 20pixels;
remplissage de colonne: équilibre;
}
Dans cet exemple, nous avons une mise en page multi-colonnes avec trois colonnes et un espace de 20 pixels entre chaque colonne. En réglant le remplissage de colonne propriété à équilibre, nous veillons à ce que le contenu soit réparti uniformément sur les colonnes, ce qui permet d'obtenir des hauteurs de colonne équilibrées.
Il est important de noter que le remplissage de colonne La propriété peut ne pas fonctionner correctement pour toutes les mises en page et peut entraîner un espacement irrégulier entre les colonnes. Dans de tels cas, vous devrez peut-être utiliser JavaScript pour équilibrer manuellement les colonnes. N'oubliez pas de suivre les meilleures pratiques et utiliser l'amélioration progressive afin que vous ne dépendiez pas de JavaScript.
Mettre tous ensemble
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 disposer en colonnes.
html>
<html>
<diriger>
<lienrel="feuille de style"href="CSScolonnes.css" />
diriger>
<corps>
Élément de conteneur
<divclasse="magazine-mise en page">Éléments enfants
<divclasse="article">
<h2>Le titre de l'articleh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dans
magna vel lorem pharetra bibendum.p>
div><divclasse="article">
<h2>Le titre de l'articleh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dans
magna vel lorem pharetra bibendum.p>
div><divclasse="article">
<h2>Le titre de l'articleh2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dans
magna vel lorem pharetra bibendum.p>
div>
div>
corps>
html>
Pour créer une mise en page de style magazine à l'aide du module CSS multi-colonnes, combinez les nombre de colonnes, largeur de colonne, écart de colonne, et remplissage de colonne propriétés:
.magazine-layout {
nombre de colonnes: 3;
largeur de colonne: 300pixels;
écart de colonne: 20pixels;
remplissage de colonne: équilibre;
}
.article {
Couleur de l'arrière plan: #f8f8f8;
rayon de bordure: 4pixels;
boîte ombre: 0 2pixels 4pixelsRVB(0, 0, 0, 0.1);
rembourrage: 10pixels;
effraction: éviter-colonne;
}
Cet exemple définit également la effraction propriété sur le .article classe, avec une valeur de éviter-colonne. La propriété garantit que chaque article reste dans une seule colonne, plutôt que de se répartir sur plusieurs colonnes. Voici à quoi devrait ressembler la mise en page :
Utilisation de replis pour les navigateurs non pris en charge
Il est important de noter que le nombre de colonnes La propriété n'est pas prise en charge dans tous les navigateurs. Les navigateurs qui ne prennent pas en charge nombre de colonnes, affichera le contenu dans une seule colonne à la place.
Pour fournir des styles de secours pour les navigateurs non pris en charge, vous pouvez utiliser des requêtes de fonctionnalités telles que @les soutiens pour détecter le soutien à la nombre de colonnes propriété et fournir des styles alternatifs lorsque la propriété n'est pas prise en charge.
Par exemple:
.récipient {
/* Repli pour les navigateurs qui ne prennent pas en charge le nombre de colonnes */
largeur: 100%;
}
/* Détecter la prise en charge du nombre de colonnes */
@les soutiens (nombre de colonnes :3) {
.récipient {
nombre de colonnes: 3;
}
}
Dans cet exemple, nous utilisons le @les soutiens requête de fonctionnalité pour détecter la prise en charge de la nombre de colonnes propriété. Si le navigateur prend en charge le nombre de colonnes, le récipient L'élément s'affichera sur trois colonnes. Si le navigateur ne prend pas en charge le nombre de colonnes, il affichera le contenu dans une seule colonne à l'aide de la largeur propriété.
Diviser le contenu en colonnes
Dans l'ensemble, les colonnes CSS offrent 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 ensemble des 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 tailles d'appareils, ce qui rend votre contenu Web plus accessible et attrayant pour vos utilisateurs.
