Un tutoriel de mise en page multi-colonnes CSS pour les débutants

Introduction au Tutoriel de mise en page multi-colonnes CSS: points clés

• Le module de disposition multi-colonnes CSS permet aux développeurs de créer des dispositions multi-colonnes réactives, ce qui peut produire de bons résultats sur différentes tailles d'écran. L'attribut column-count spécifie le nombre de colonnes, et l'attribut column-width spécifie la largeur de chaque colonne. Les deux peuvent être définis sur auto ou des nombres positifs, et peuvent être définis en même temps à l'aide de l'attribut Abréviation columns.
L'attribut
• column-gap spécifie l'espacement des colonnes, et l'attribut column-rule est une forme abrégée, nous permettant d'ajouter des séparateurs entre les colonnes. L'attribut column-fill détermine comment le contenu est alloué pour remplir les colonnes, et l'attribut column-span contrôle comment les éléments s'étendent sur plusieurs colonnes.
• Pour que la mise en page s'affiche bien sur toutes les tailles d'écran, column-count et column-width doivent être spécifiées. L'utilisation de requêtes multimédias peut aider à résoudre des problèmes tels que le défilement horizontal ou les longueurs de colonne excessives. Les navigateurs hérités qui ne prennent pas en charge les fonctionnalités multi-colonnes seront élégamment rétrogradés en dispositions à une seule colonne.

Les lignes de texte longues peuvent être plus laborieuses à lire, et les lecteurs accordent plus d'attention aux lignes non manquantes plutôt qu'au contenu texte lui-même. Ce problème peut être facilement résolu à l'aide de la disposition multi-colonnes. Les dispositions multi-colonnes sont très courantes dans les supports imprimés. La fonctionnalité du module de disposition multi-colonnes CSS nous permet de reproduire le même effet multi-colonnes sur le site Web.

L'une des difficultés d'utilisation des dispositions multi-colonnes dans la conception Web est l'incapacité de contrôler la taille du document. Dans ce tutoriel, je vais vous apprendre à créer une disposition multi-colonnes réactive qui fonctionnera bien sur une variété de tailles d'écran. Nous allons commencer par les bases, puis apprendre progressivement des concepts plus complexes.

Prise en charge du navigateur

Si vous êtes prêt à utiliser les préfixes, la prise en charge du navigateur pour les dispositions multi-colonnes est très bonne. Selon les statistiques du site Web Can I It Use, cette fonctionnalité est prise en charge dans 95,32% des navigateurs dans le monde. Certains navigateurs (tels que IE10, Edge et Opera Mini) prennent entièrement en charge les dispositions multi-colonnes. D'autres navigateurs tels que Firefox et Chrome nécessitent un préfixe.

Si vous avez besoin de prendre en charge les anciens navigateurs (généralement IE9 et ci-dessous), vous pouvez utiliser l'ancien polyfill. Bien sûr, si le navigateur ne prend pas en charge la fonction multi-colonnes, la disposition sera élégamment rétrogradée en une disposition à une seule colonne. Ainsi, Polyfill n'est peut-être pas la meilleure option dans ce cas.

Le module de disposition multi-colonne CSS a de nombreuses propriétés différentes. Dans les sections suivantes, je les présenterai une par une.

Nombre de colonnes et de largeur de colonne

L'attribut

column-count spécifie le nombre de colonnes à définir pour l'élément. Vous pouvez le définir sur auto ou un nombre positif. Lorsqu'il est défini sur auto, le nombre de colonnes sera déterminé par l'attribut column-width. S'il est défini sur un nombre positif, toutes les colonnes ont des largeurs égales.

L'attribut

column-width spécifie la largeur de chaque colonne de l'élément. Ce n'est pas strictement suivi. Par exemple, s'il n'y a pas suffisamment d'espace disponible, la colonne peut être plus étroite. Cette propriété peut également être définie sur une valeur auto ou un nombre positif. S'il est défini sur auto, la largeur sera déterminée par l'attribut column-count. L'espace libre est réparti uniformément sur toutes les colonnes.

Alternativement, vous pouvez définir les deux valeurs en même temps à l'aide de l'attribut Abréviation columns. La syntaxe de l'attribut columns est la suivante:

<code class="language-css">.example {
  columns:  || 
}</code>

Certains exemples d'utilisation de cette propriété sont présentés ci-dessous, ainsi que des explications à côté de chaque exemple:

<code class="language-css">.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}</code>

Comme vous pouvez le voir, la première définition columns est l'abréviation du quatrième, et la seconde est l'abréviation du troisième. Fondamentalement, si un entier n'alloue pas d'unités, elle est analysée à column-count.

Il s'agit d'une démonstration de codepen pour démontrer les fonctionnalités discutées jusqu'à présent

Si vous redimensionnez la fenêtre, vous remarquerez ce qui suit:

La propriété
• column-count facilite toujours le nombre de colonnes égales à la valeur que vous avez spécifiée. La seule chose qui change est la largeur de la colonne.
L'attribut
• column-width modifie automatiquement le nombre de colonnes en fonction de l'espace disponible. Le nombre de colonnes est ajusté en rendant la largeur de la colonne supérieure à la valeur spécifiée. Il peut également ajuster la largeur de toutes les colonnes à une valeur plus petite en cas d'espace libre insuffisant.
L'attribut
• columns utilise la valeur column-count comme limite pour le nombre maximum de colonnes autorisées. Il ajuste la largeur de telle manière que column-count ne dépassera jamais la limite de comptage, et column-width est également très proche de la largeur spécifiée.

Espacement des colonnes et règles de colonne

L'attribut

column-gap nous permet de spécifier la quantité d'espace entre les colonnes. Vous pouvez le définir sur normal ou la valeur de longueur. Il peut être nul, mais pas négatif. Lorsque vous le définissez sur normal, il utilise l'espacement par défaut entre les colonnes définies par le navigateur.

L'attribut

column-rule est une abréviation qui nous permet d'ajouter des diviseurs entre les colonnes. Ceci est similaire à l'utilisation des attributs border-left ou border-right. Cette propriété suit la syntaxe suivante:

<code class="language-css">.example {
  column-rule:  ||  || 
}</code>

Pour column-rule-width, vous pouvez spécifier la largeur comme une longueur (par exemple 3px) ou utiliser des mots clés (par exemple thin, medium, ou thick). column-rule-style Acceptez des valeurs telles que dashed, dotted, solid. Vous pouvez utiliser toutes les valeurs valides de l'attribut border-style avec column-rule-style, qui peut être n'importe quelle valeur de couleur valide. column-rule-color

Il s'agit d'une démonstration de codePen où ces propriétés sont utilisées ensemble

Colonne Film et colonne Span L'attribut

détermine comment attribuer du contenu pour remplir les colonnes. Cette propriété peut être définie sur column-fill ou auto. Lorsqu'ils sont définis sur balance, les colonnes sont remplies dans l'ordre. Utilisez auto pour vous assurer que le contenu est réparti uniformément entre toutes les colonnes. balance

Il est important de noter que si vous définissez une hauteur fixe pour les éléments de colonne, Firefox équilibrera automatiquement le contenu. Cependant, d'autres navigateurs commenceront à remplir les colonnes dans l'ordre.

Les attributs

column-span contrôlent comment les éléments s'étendent sur plusieurs colonnes. Il a deux valeurs possibles: all ou none. Lorsqu'il est défini sur all, l'élément couvre toutes les colonnes. Cette propriété n'est pas prise en charge dans Firefox.

Il s'agit d'une démonstration de codepen qui "couvre" un élément Blockquote dans toutes les colonnes

Dans Firefox, Blockquote se retrouve dans la colonne du milieu, ce qui peut être une secours acceptable.

Créer des dispositions réactives avec plusieurs colonnes

Maintenant que vous avez appris les différentes propriétés et valeurs possibles, concentrons-nous sur la façon de maintenir la mise en œuvre de la mise en page et conviviale.

column-count et column-width ont leurs propres problèmes. Bien que column-count puisse contrôler le nombre de colonnes sur des appareils plus grands, la disposition sur des appareils plus petits sera interrompue. De même, column-width s'assurera que les colonnes ne sont pas trop étroites sur des appareils plus petits, mais se traduiront par de nombreuses colonnes sur des appareils plus grands.

Pour vous assurer que votre mise en page s'affiche bien sur toutes les tailles d'écran, vous devez spécifier à la fois column-count et column-width. De cette façon, vous pouvez contrôler la largeur et le nombre de colonnes. Cependant, vous devrez peut-être encore résoudre certains problèmes, dont nous discuterons ensuite.

Correction de défilement horizontal

Si vous spécifiez une hauteur fixe pour la colonne, le rétrécissement de la fenêtre fera apparaître une barre de défilement horizontale. Étant donné que le contenu ne peut pas être élargi verticalement, il se développera horizontalement. Pour résoudre ce problème, vous pouvez redimensionner votre navigateur pour voir la largeur de la barre de défilement horizontale pour la première fois. Vous pouvez ensuite utiliser une requête multimédia pour définir la hauteur de la colonne en dessous de cette largeur à auto. Voici le code pour ce faire:

<code class="language-css">.example {
  columns:  || 
}</code>

Cette démonstration de codepen montre le problème et les solutions possibles

redimensionner la fenêtre pour voir comment les deux exemples réagissent.

COLLEMENT TROP Long Colonne

Si votre colonne est trop longue, les utilisateurs devront continuer à faire défiler de haut en bas pour tout lire, ce qui peut être ennuyeux. Lorsque la hauteur de la colonne est supérieure à la hauteur de la fenêtre elle-même, il est préférable de supprimer plusieurs colonnes. Cela peut être fait à nouveau en utilisant la requête multimédia:

<code class="language-css">.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}</code>

Dans ce cas, je n'utilise plusieurs colonnes que lorsque la largeur de la fenêtre permet à l'utilisateur de ne plus avoir besoin de faire défiler de haut en bas.

Afficher la démo avec plusieurs colonnes et requêtes multimédias

Conclusion

J'espère que ce didacticiel d'introduction pour les modules de mise en page multi-colonnes CSS vous familiarisera avec cette fonctionnalité. Ces propriétés peuvent être bien ajoutées à votre boîte à outils de conception réactive, et si vous avez toujours besoin de prendre en charge les navigateurs plus anciens, plusieurs colonnes seront souvent dégradées élégamment en colonnes uniques.

FAQ pour CSS Multi-Column Dayout

Comment créer une disposition multi-colonnes dans CSS?

La création de dispositions multi-colonnes dans CSS est très simple. Vous pouvez utiliser la propriété column-count pour spécifier le nombre de colonnes que vous souhaitez dans la mise en page. Par exemple, si vous voulez trois colonnes, vous pouvez écrire:

<code class="language-css">.example {
  columns:  || 
}</code>

Dans cet exemple, .container est la classe des éléments que vous souhaitez diviser en colonnes. L'attribut column-count divisera automatiquement le contenu de l'élément dans le nombre spécifié de colonnes.

Comment contrôler l'espacement entre les colonnes dans CSS?

La propriété

column-gap vous permet de contrôler l'espace entre les colonnes. La valeur que vous définissez pour cette propriété sera la largeur de l'écart. Par exemple, si vous voulez un écart de 20px entre les colonnes, vous pouvez écrire:

<code class="language-css">.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}</code>

Puis-je créer des colonnes de différentes largeurs dans CSS?

Malheureusement, le module de disposition multi-colonne CSS ne prend pas en charge les colonnes de différentes largeurs. Toutes les colonnes créées avec l'attribut column-count auront la même largeur. Cependant, vous pouvez utiliser d'autres techniques CSS telles que Flexbox ou Grid pour créer des colonnes de différentes largeurs.

Comment contrôler la largeur de la colonne dans CSS?

Vous pouvez utiliser l'attribut column-width pour contrôler la largeur de la colonne. Cette propriété spécifie la largeur optimale de la colonne, mais le navigateur ajuste la largeur si nécessaire pour s'adapter au contenu. Par exemple, pour définir la largeur de la colonne sur 200px, vous pouvez écrire:

<code class="language-css">.example {
  column-rule:  ||  || 
}</code>

Comment créer des règles de colonne dans CSS?

La propriété

column-rule vous permet de créer des règles ou des lignes entre les colonnes. Vous pouvez spécifier la largeur, le style et la couleur de la règle. Par exemple, pour créer une règle noire solide 1px, vous pouvez écrire:

<code class="language-css">.responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}</code>

Comment contrôler les interruptions de colonnes dans CSS?

La propriété

break-inside vous permet de contrôler les interruptions de colonnes. Vous pouvez définir cette propriété sur avoid pour éviter les interruptions de l'élément. Par exemple:

<code class="language-css">@media (min-width: 800px) {
  .long-columns {
    columns: 3 200px;
  }
}</code>

Puis-je utiliser des dispositions multi-colonnes avec une conception réactive?

Oui, vous pouvez utiliser des dispositions multi-colonnes avec des conceptions réactives. Vous pouvez utiliser les requêtes multimédias pour ajuster le nombre de colonnes en fonction de la largeur de la fenêtre. Par exemple, vous voudrez peut-être afficher une colonne sur un petit écran et trois colonnes sur un grand écran.

Comment remplir des colonnes dans CSS?

Par défaut, les colonnes sont remplies dans l'ordre. Cela signifie d'abord remplir la première colonne, puis la deuxième colonne, et ainsi de suite. Cependant, vous pouvez modifier ce comportement en utilisant l'attribut column-fill. Si vous définissez cette propriété sur balance, le navigateur essaiera de remplir la colonne uniformément.

Comment croiser les colonnes?

L'attribut

column-span permet aux éléments de s'étendre sur plusieurs colonnes. Vous pouvez définir cette propriété sur all pour faire en sorte que l'élément couvre toutes les colonnes. Par exemple:

<code class="language-css">.container {
  column-count: 3;
}</code>

Y a-t-il un problème de compatibilité du navigateur avec la disposition multi-colonnes CSS?

La plupart des navigateurs modernes prennent en charge la disposition multi-colonnes CSS, mais il peut y avoir des différences de mise en œuvre. Il est préférable de tester votre disposition dans un autre navigateur pour vous assurer qu'il fonctionne comme prévu. Vous pouvez également utiliser des outils tels que je peux utiliser pour vérifier la prise en charge du navigateur pour différentes propriétés CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!