web-dev-qa-db-fra.com

Définition de longueurs différentes pour les espaces de grille dans CSS Grid

Je crée une mise en page en utilisant des grilles CSS et je veux avoir un espace différent entre chaque ligne.

Je peux bien créer la mise en page en utilisant simplement la marge sur chaque élément, mais ce genre de obscurcit la simplicité du code. Y a-t-il des astuces de grille que je peux faire pour y parvenir, grid-row-gap ne semble prendre qu'une seule valeur, qu'il utilise pour toutes les lignes.

Ce que j'essaie de réaliser, c'est une mise en page comme celle-ci:

https://jsfiddle.net/8swzgk0b/1/

.grid {
  display: grid;
  grid-template-columns: auto 25% 25%;
  grid-template-rows: auto auto auto;
  width 100%;
  margin: 20px;
  grid-column-gap: 40px;
  /* grid-row-gap: 40px 60px; */
}

div {
  background: #838383;
  height: 80px;
}

.wide {
  grid-column: 1 / span 3;
  margin-bottom: 5px;
}

.row-2 {
  background: green;
  margin-bottom: 10px;
}

.row-3 {
  background: blue;
  margin-bottom: 30px;
}

.row-4 {
  background: red;
  margin-bottom: 20px;
}
<div class="grid">
  <div class="wide"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
</div>
csscss-grid
14
Stephan Olsen

Y a-t-il une astuce de grille que je peux faire pour y parvenir, grid-row-gap ne semble prendre qu'une seule valeur, qu'il utilise pour toutes les lignes.

Avec le grid-row-gap, grid-column-gap et grid-gap propriétés, vous ne pouvez pas appliquer des largeurs différentes à différents espaces. Comme vous l'avez noté, une seule valeur peut être utilisée pour chaque axe: une pour les espaces de ligne et une autre pour les espaces de colonne ( spec ).

Vous pouvez utiliser des marges (ou du rembourrage) pour afficher un espace supplémentaire, mais cela ne change pas réellement la largeur de l'espace. Il ne fait qu'agrandir la ligne.

Dans l'exemple ci-dessous (basé sur votre code), grid-row-gap est défini sur 20 pixels. Les éléments de la grille ont le margin-bottom variations que vous définissez. Remarquez comment le grip-row-gap la taille ne change jamais. Toutes les modifications se produisent à l'intérieur de la ligne.

enter image description here

.grid {
  display: grid;
  grid-template-columns: auto 25% 25%;
  grid-template-rows: auto auto auto;
  grid-column-gap: 40px;
  grid-row-gap: 20px;
}

div {
  background: #838383;
  height: 80px;
}

.wide {
  grid-column: 1 / span 3;
  margin-bottom: 5px;
}

.row-2 {
  background: green;
  margin-bottom: 10px;
}

.row-3 {
  background: blue;
  margin-bottom: 30px;
}

.row-4 {
  background: red;
  margin-bottom: 20px;
}
<div class="grid">
  <div class="wide"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
</div>

Si vous souhaitez appliquer des écarts de taille différents entre les lignes, envisagez d'utiliser des lignes réelles pour le travail:

enter image description here

Maintenant, les écarts entre les rangées ont leurs propres hauteurs uniques.

.grid {
  display: grid;
  grid-template-columns: auto 25% 25%;
  grid-template-rows: 80px 5px 80px 10px 80px 30px 80px 20px; /* adjusted */
  grid-column-gap: 40px;
}

.wide {
  grid-column: 1 / span 3;
  background: #838383;
}

.row-2 {
  grid-row-start: 3;
  background: green;
}

.row-3 {
  grid-row-start: 5;
  background: blue;
}

.row-4 {
  grid-row-start: 7;
  background: red;
}
<div class="grid">
  <div class="wide"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-2"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-3"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
  <div class="row-4"></div>
</div>
17
Michael_B