Conteneur en grille CSS

1
2
3
4
5
6
7
8

Essayez-le vous-même

conteneur de grille

Pour faire un élément HTML jouer le rôle de conteneur de grille, vous devez configurer display L'attribut est réglé sur grid ou inline-grid.

Le conteneur de grille est composé de éléments de grille placés à l'intérieur des colonnes et des lignes.

align-content attribut

grid-template-columns L'attribut définit le nombre de colonnes dans le布局 de la grille et peut définir la largeur de chaque colonne.

Cette valeur est une liste séparée par des espaces, où chaque valeur définit la longueur correspondante de la colonne.

Si vous souhaitez que la mise en page du réseau contienne quatre colonnes, spécifiez la largeur de ces quatre colonnes ; si toutes les colonnes doivent avoir la même largeur, réglez-la sur "auto".

Exemple

Générer un réseau contenant quatre colonnes :

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Essayez-le vous-même

Attention :Si il y a plus de 4 éléments dans un réseau de 4 colonnes, le réseau ajoute automatiquement de nouvelles lignes et place ces éléments dedans.

grid-template-columns L'attribut peut également être utilisé pour spécifier la taille des colonnes (largeur).

Exemple

Définir la taille de ces 4 colonnes :

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Essayez-le vous-même

align-content attribut

grid-template-rows L'attribut définit la hauteur de chaque colonne.

1
2
3
4
5
6
7
8

Ses valeurs sont une liste séparée par des espaces, où chaque valeur définit la hauteur correspondante de la ligne :

Exemple

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Essayez-le vous-même

align-content attribut

justify-content L'attribut est utilisé pour aligner tout le réseau à l'intérieur du conteneur.

1
2
3
4
5
6
7
8

Attention :La largeur totale de la grille doit être inférieure à la largeur du conteneur pour que l'attribut justify-content fonctionne.

Exemple

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  justify-content: space-around;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  justify-content: space-between;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  justify-content: center;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  justify-content: start;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  justify-content: end;
}

Essayez-le vous-même

align-content attribut

align-content Cette propriété aligne verticalement tout le grille à l'intérieur du conteneur.

1
2
3
4
5
6
7
8

Attention :La hauteur totale de la grille doit être inférieure à la hauteur du conteneur pour que l'attribut align-content puisse fonctionner.

Exemple

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Essayez-le vous-même

Exemple

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Essayez-le vous-même