web-dev-qa-db-fra.com

Pourquoi l'écart de grille provoque-t-il un débordement?

Pourquoi ai-je un débordement sur l'axe X dans l'extrait de code suivant?

Le débordement est généré une fois que j'applique grid-gap: 10px sur mon .body conteneur de grille.

div:not(.header):not(.body):not(.row) {
  border: 1px solid grey;
}

.header {
  margin-top: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header-left header-right-up" "header-left header-right-down";
  grid-template-rows: 40px 40px;
  grid-template-columns: minmax(50px, 200px) auto;
}

.header-left {
  grid-area: header-left;
}

.header-right-up {
  grid-area: header-right-up;
}

.header-right-down {
  grid-area: header-right-down;
}

.body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-auto-rows: 80px; 
  grid-gap: 10px;
}

.row-left {
}

.row-center {
}

.row-right {
}
<div class="header">
  <div class="header-left">image</div>
  <div class="header-right-up">content</div>
  <div class="header-right-down">long content</div>
</div>

<div class="body">
    <div class="row-left"></div>
    <div class="row-center"></div>
    <div class="row-right"></div>

    <div class="row-left"></div>
    <div class="row-center"></div>
    <div class="row-right"></div>

    <div class="row-left"></div>
    <div class="row-center"></div>
    <div class="row-right"></div>
  </div>
</div>

https://codepen.io/anon/pen/WdJExz?editors=11

csscss-grid
20
Damiano Barbati

Vous disposez d'un conteneur de grille à 3 colonnes (.body):

grid-template-columns: 25% 50% 25%

La largeur totale de ces colonnes est de 100%.

Vous ajoutez ensuite des gouttières entre les colonnes (et les lignes):

grid-gap: 10px

qui est un raccourci pour:

grid-column-gap: 10px;
grid-row-gap: 10px;

Ainsi, lorsque vous additionnez toutes les largeurs, vous obtenez:

25% + 50% + 25% + 10px + 10px

Plus brièvement:

100% + 20px > 100%, which results in an overflow condition

(Remarque: grid-*-gap les propriétés s'appliquent uniquement entre les éléments de la grille - jamais entre les éléments et le conteneur. C'est pourquoi nous calculons deux écarts de grille, pas quatre.)

En tant que solution , au lieu d'unités en pourcentage, essayez d'utiliser les unités fr, qui s'appliquent uniquement à l'espace libre. Cela signifie que fr longueurs sont calculées après tout grid-gap des longueurs sont appliquées.

grid-template-columns: 1fr 2fr 1fr

div:not(.header):not(.body):not(.row) {
  border: 1px solid grey;
}

.header {
  margin-top: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "header-left header-right-up" "header-left header-right-down";
  grid-template-rows: 40px 40px;
  grid-template-columns: minmax(50px, 200px) auto;
}

.header-left {
  grid-area: header-left;
}

.header-right-up {
  grid-area: header-right-up;
}

.header-right-down {
  grid-area: header-right-down;
}

.body {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* ADJUSTMENT */
  grid-auto-rows: 80px;
  grid-gap: 10px;
}

.row-left {}

.row-center {}

.row-right {}
<div class="header">
  <div class="header-left">image</div>
  <div class="header-right-up">content</div>
  <div class="header-right-down">long content</div>
</div>

<div class="body">
  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>

  <div class="row-left"></div>
  <div class="row-center"></div>
  <div class="row-right"></div>
</div>

démo codepen révisée

Plus de détails ici: La différence entre le pourcentage et les unités fr dans la disposition de la grille CSS

45
Michael_B

Si vous souhaitez utiliser des pourcentages ou une autre unité, il existe une autre solution. L'utilisation de la fonction minmax() permettra aux colonnes de rétrécir pour s'adapter au conteneur parent et de ne pas provoquer de débordement .

La solution ressemblerait à ceci:

grid-template-columns: minmax(auto, 25%) minmax(auto, 50%) minmax(auto, 25%);
gap: 10px;

En savoir plus sur la fonction minmax()ici .

4
Valentin Genev