web-dev-qa-db-ja.com

CSSグリッドレイアウトギャップボックスのサイズ変更

ウィンドウの幅と高さの100％を占めるCSSグリッドがあります（body要素にはdisplay: grid;）。グリッドには、行と列のテンプレートと、割り当てられたスペースの100％を占める要素があります。ただし、grid-gapをグリッドに追加すると、グリッドがウィンドウに対して大きすぎて、スクロールバーが強制的に表示されます。どうすればgrid-gapグリッドの次元への追加から-box-sizing: border-box;要素の寸法にパディングが追加されないようにしますか？代わりに、ギャップでグリッドのセルを縮小します。

ありがとう。 like this

cssgrid
20
Freddy Tuxworth

このデモでわかるように、box-sizing: border-boxとパディングを使用した場合と同じように機能します。高さは100vhに設定されており、grid-gapを削除または追加すると、スクロールバーがなくなり、本体からマージンを削除するだけで済みます。

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>
7
Nenad Vracar

「for」を使用すると機能します。

<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;
        }
    }
}
10
Henning Fischer

ビューポート単位を使用できます：

  • vw（ウィンドウの幅の1％）
  • vh（ウィンドウの高さの1％）
* {
  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