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

Utilisez Flexbox pour des dispositions unidimensionnelles simples et réactives avec des largeurs de colonnes égales ou flexibles. 2. Utilisez la grille CSS pour des dispositions précises et bidimensionnelles et des conceptions réactives avec des colonnes d'ajustement automatique via la répétition (Auto-Fit, Minmax ()). 3. Évitez le flotteur en raison de la nécessité de Clearfix et d'une mauvaise réactivité. 4. Évitez le bloc de ligne en raison de la sensibilité aux espaces blancs et du contrôle de disposition limité. Pour les dispositions modernes, préférez la grille pour les conceptions complexes et Flexbox pour des arrangements plus simples et linéaires, assurant la maintenabilité et la réactivité.

La création d'une disposition multi-colonnes dans CSS peut être effectuée de plusieurs manières, en fonction du niveau de contrôle et de réactivité dont vous avez besoin. Voici les méthodes les plus courantes et les plus efficaces:

1. Utilisation de CSS Flexbox

Flexbox est l'une des façons les plus faciles et les plus flexibles de créer des dispositions multi-colonnes. Il est idéal pour les dispositions unidimensionnelles (basées sur une ligne ou une colonne).

Exemple: mise en page à 3 colonnes

 .Container {
  Affichage: flex;
  Écart: 20px; / * espace entre les colonnes * /
  rembourrage: 20px;
}

.colonne {
  Flex: 1; / * Chaque colonne prend un espace égal * /
  Color d'arrière-plan: # F0F0F0;
  rembourrage: 15px;
  Border-Radius: 8px;
}

 <div class = "conteneur">
  <div class = "colonne"> colonne 1 </div>
  <div class = "colonne"> colonne 2 </div>
  <div class = "colonne"> Colonne 3 </div>
</div>

Points clés:

• Utilisez flex-wrap: wrap si vous souhaitez que des colonnes s'empilent sur de petits écrans.
• Contrôler la largeur de colonne individuelle avec flex: 2 1 0 (par exemple, une colonne plus large que les autres).
• Combinez avec des requêtes multimédias pour un comportement réactif.

2. Utilisation de la grille CSS

La grille CSS est puissante pour les dispositions bidimensionnelles et donne un contrôle précis sur les lignes et les colonnes.

Exemple: disposition réactive à 3 colonnes

 .Container {
  Affichage: grille;
  Grid-Template-colonnes: 1fr 1fr 1fr; / * trois colonnes égales * /
  Écart: 20px;
  rembourrage: 20px;
}

/ * Réactif: Passez à 1 colonne sur de petits écrans * /
@media (max-large: 768px) {
  .Container {
    grille-template-colonnes: 1FR;
  }
}

Vous pouvez également utiliser repeat() et minmax() pour plus de flexibilité:

 .Container {
  Affichage: grille;
  grille-template-colonnes: répéter (auto-fit, Minmax (250px, 1fr));
  Écart: 20px;
  rembourrage: 20px;
}

Cela ajuste automatiquement le nombre de colonnes en fonction de l'espace disponible - idéal pour la conception réactive.

3. Utilisation de float (méthode héritée)

Bien que obsolète, float a été largement utilisé avant Flexbox et Grid.

 .colonne {
  flottant: à gauche;
  Largeur: 33,33%;
  rembourrage: 10px;
}

/ * Effacer les flotteurs * /
.row :: après {
  contenu: "";
  Affichage: table;
  Clear: les deux;
}

Pourquoi éviter le flotteur:

• Nécessite des hacks ClearFix.
• Moins flexible et plus difficile à rendre réactif.
• Non destiné à des fins de mise en page (à l'origine pour les images d'emballage de texte).

4. Utilisation du bloc en ligne (cas simples)

Utile pour les dispositions de base mais sensibles à l'espace dans le HTML.

 .Container {
  taille de police: 0; / * supprime l'écart des espaces blancs * /
}

.colonne {
  Affichage: bloc en ligne;
  Aligne verticale: haut;
  Largeur: 33,33%;
  taille de police: 16px;
  rembourrage: 10px;
}

L'espace blanc dans HTML (comme les pauses de ligne) crée des lacunes entre les éléments inline-block , donc cette méthode est moins fiable.

Quelle méthode devez-vous utiliser?

• Pour les dispositions modernes: utilisez Flexbox ou Grid .
  • Utilisez Flexbox pour des dispositions plus simples et linéaires (par exemple, barres de navigation, colonnes à hauteur égale).
  • Utilisez la grille pour des conceptions complexes et bidimensionnelles (par exemple, tableaux de bord, grilles de cartes).
• Évitez float et inline-block pour la disposition à moins de supporter des navigateurs très anciens.

Les dispositions multi-colonnes réactives fonctionnent mieux avec la grille à l'aide minmax() et auto-fit , ou Flexbox avec des requêtes d'enveloppe et de média.

Fondamentalement, Flexbox et Grid rendent les dispositions multi-colonnes simples et maintenables. Choisissez la grille pour plus de contrôle, Flexbox pour la simplicité.

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!