web-dev-qa-db-fra.com

CSS Grid Layout Gap Box Dimensionnement

J'ai une grille CSS qui occupe 100% de la largeur et 100% de la hauteur d'une fenêtre (l'élément body a display: grid;). La grille contient des modèles de lignes et de colonnes et des éléments occupant 100% de l'espace alloué. Cependant, lorsque j'ajoute un grid-gap à la grille, la grille est trop grande pour la fenêtre, ce qui oblige les barres de défilement à apparaître. Comment puis-je empêcher le grid-gap d’ajouter aux dimensions de la grille - de la même manière que box-sizing: border-box; arrête de compléter les ajouts aux dimensions d’un élément? Au lieu de cela, je veux que les lacunes réduisent les cellules de la grille.

Merci.  like this

cssgrid
14
Freddy Tuxworth

Cela fonctionne comme si vous utilisiez box-sizing: border-box et un remplissage comme vous pouvez le voir dans cette démo. La hauteur est définie sur 100vh et vous pouvez voir que si vous supprimez ou ajoutez grid-gap, il n'y a pas de barre de défilement, vous devez simplement supprimer la marge du corps.

body {
  margin: 0;
}
.grid {
  display: grid;
  height: 100vh;
  grid-gap: 20px;
  background: #FF7D7D;
  grid-template-columns: 1fr 2fr;
}
.grid > div {
  background: black;
  color: white;
}
div.a, div.d {
  color: black;
  background: white;
}
<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>

6
Nenad Vracar

Lorsque vous utilisez "pour" cela fonctionne.

<section>
    <article class="a">A</article>
    <article class="b">B</article>
    <article class="c">C</article>
    <article class="d">D</article>
</section>

section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-gap: 20px;

    border: 10px solid blue;

    article {
        background-color: tomato;

        &.d {
            grid-column: 2; 
            grid-row-start: 1; 
            grid-row-end: 4;

            background-color: olive;
        }
    }
}
7
Henning Fischer

Vous pouvez utiliser des unités de vue-port:

  • vw (1% de la largeur de la fenêtre)
  • vh (1% de la hauteur de la fenêtre)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}

.first {  height: 40vh;  }
.hori {  height: 10vh;  }
.second {  height: 50vh;  }


div > div {
  float: left;
}

.left {  width: 40vw;  }
.vert {  width: 10vw  }
.right {  width: 50vw;  }

.first .left,
.second .right {
  background: #ccc;
}

.first .right,
.second .left {
  background: #000;
}
<div class="first">
  <div class="left"></div>
  <div class="grid-break vert"></div>
  <div class="right"></div>
</div>

<div class="grid-break hori"></div>

<div class="second">
  <div class="left"></div>
  <div class="grid-break vert"></div>
  <div class="right"></div>
</div>

0
Chris Happy