Disposition en grille et flexible en CSS

Introduction

• FlexBox et la disposition en grille sont deux mises en page puissantes.

Flexbox :

• Flexbox est un modèle de disposition unidimensionnel et convient parfaitement à l'organisation des éléments sur une seule ligne ou une seule colonne.
• Flexbox est particulièrement utile lorsque la taille des éléments ou la taille du conteneur est inconnue.
• C'est idéal pour aligner des éléments horizontalement et verticalement, et c'est très utile pour créer des barres de navigation, des barres latérales ou des barres d'outils.

Grille CSS :

• La grille est un modèle de mise en page bidimensionnel et convient parfaitement pour organiser les éléments en lignes et en colonnes en même temps.
• Il est idéal pour créer des mises en page complexes et peut gérer simultanément des colonnes et des lignes, ce qui en fait un bon choix pour créer des mises en page complexes.

Disposition de la grille en détail

grid-template-columns: repeat(3, 1fr);
grid-template-row: repeat(3, auto);
grid-column: 1/3
grid-row: 1/4

Remplacement de lignes

• L'instruction repeat(3, minmax(200px, 1fr)) crée trois lignes (ou colonnes, selon l'endroit où elle est utilisée), chacune avec une taille minimale de 200px et une taille maximale de 1fr.
• L'unité 1fr représente une fraction de l'espace disponible dans le conteneur grillagé. Ainsi, si la taille du conteneur dépasse la taille minimale totale de toutes les lignes (600 px dans ce cas), l'espace restant sera réparti également entre les lignes.

repeat(3, minmax(200px 1fr))

ajustement et remplissage automatiques

Les mots-clés de remplissage automatique et d'ajustement automatique dans CSS Grid contrôlent le comportement de la grille lorsque les éléments de la grille n'occupent pas d'espace supplémentaire dans le conteneur de grille.

remplissage automatique

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Dans cet exemple, la grille créera autant de colonnes de 100 px qu'elle peut contenir dans le conteneur. S'il reste de l'espace, il sera réparti équitablement entre les colonnes.

ajustement automatique :

• Ce mot-clé indique également à la grille de créer autant de pistes que possible, mais il réduit les pistes vides, donc il n'y a pas de pistes vides à la fin de la grille.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Dans cet exemple, la grille créera autant de colonnes de 100 px qu'elle peut contenir dans le conteneur. S'il reste de l'espace, il sera réparti également entre les colonnes et toutes les colonnes vides seront réduites.

sous-grille

• La valeur de la sous-grille dans CSS Grid Layout est utilisée lorsque vous souhaitez qu'un élément de grille devienne un conteneur de grille et s'aligne sur sa grille parent.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  display: grid;
  grid-template-columns: subgrid;
}

REMARQUE :-

• Cela peut être utile lorsque vous souhaitez que les grilles imbriquées s'alignent sur la grille parent.
• Cependant, la sous-grille n'est pas largement prise en charge dans tous les navigateurs.

Requête de conteneur

1. Requête sur la taille du conteneur

• Les requêtes de média de largeur prennent en compte la largeur de la fenêtre d'affichage mais les requêtes sur la taille du conteneur prennent en compte la largeur du conteneur. Les conteneurs sont les éléments interrogés.

Règles :-

• Règles avec en vigueur uniquement les descendants du conteneur pas le conteneur lui-même

• Les requêtes sur la taille des conteneurs sont un ajout au design réactif et ne remplacent pas les requêtes multimédias.
  

<article class="card">
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>

<!-- we can't query cards in container query so only work with descendants-->
<!-- Workaround solution would be check below-->
<div class="card">
<article >
    <h2>That's No Moon. It's a Space Station.</h2>
    <p class="text">At 198km diameter, Mimas is bigger than the first Death Star (120km) but smaller than the second (800km). </p>
    <p class="link"><a href="https://science.nasa.gov/saturn/moons/mimas/" target="_blank" class="button">More about Mimas</a></p>
  </article>
</div>

.card {
  container-name: card;
  container-type: inline-size;
}

@container card (min-width: 200px) {
  article {
    background-color: red;
  }
}

@container card (min-width: 250px) {
  article {
    ...
  }
}

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!