web-dev-qa-db-ja.com

CSSグリッドアイテムが残りのスペースを占有する方法

CSSグリッドレイアウトで作成されたカードがあります。左に画像、右上にテキスト、右下にボタンまたはリンクがある場合があります。

以下のコードでは、緑の領域ができるだけ多くのスペースを占有し、同時に青の領域ができるだけ小さなスペースを占有しないようにするにはどうすればよいですか？

緑は青い領域を可能な限り下に押します。

https://jsfiddle.net/9nxpvs5m/

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "one two"
    "one three"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>
htmlcsscss3gridcss-grid
13
Jens Törnell

grid-template-rows: 1fr min-content;を.gridに追加すると、まさにあなたが求めているものが得られます:)。

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr min-content;
  grid-template-areas:
    "one two"
    "one three"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

Jens edits：ブラウザーのサポートを改善するために、代わりにこれを使用できます：少なくともこの場合、grid-template-rows: 1fr auto;。

10
Kevin Powell

グリッドは、交差する一連の行と列です。

2番目の列の2つのアイテムは、コンテンツの高さに基づいて行の高さを自動的に調整します。

それはグリッドの仕組みではありません。 2列目の行の高さに対するこのような変更は、1列目にも影響します。

CSSグリッドを使用する必要がある場合は、コンテナ、たとえば12行を指定し、必要に応じて項目を行に広げます。

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: repeat(12, 15px);
}

.one {
  grid-row: 1 / -1;
  background: red;
}

.two {
  grid-row: span 10;
  background: lightgreen;
}

.three {
  grid-row: span 2;
  background: aqua;
}

.grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

それ以外の場合は、flexboxソリューションを試すことができます。

.grid {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

.one {
  flex: 0 0 100%;
  width: 30%;
  background: red;
}

.two {
  flex: 1 0 1px;
  width: 70%;
  background: lightgreen;
}

.three {
  background: aqua;
}

.grid>div {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>
2
Michael_B

グリッドを使用し、グリッドテンプレート領域を使用している場合、特定の領域に幅を指定した場合、スペースグリッドが自動的に残ります。この状況では、grid-template-columnsをmin-contentまたはmax-contentのいずれかにすると、位置が自動的に調整されます。

0
dean filigreti

間違いなく最もエレガントなソリューションではなく、おそらくベストプラクティスでもありませんが、

"one two"

あなたが持っている部分の前に

"one three"

だから最終的には

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "one two"
    "one two"
    "one two"
    "one three"
}

繰り返しますが、これは単なる回避策であり、より良い解決策があります...しかし、これはうまくいきます。

0
gymnast66x

私はグリッドが初めてなので、これがうまくいかない場合はおologiesびします。

可能なアプローチは、twoとthreeをグループ化し、flexbox？を使用することです。

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "one two"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.wrap {
  grid-area: two;
  display: flex;
  flex-direction: column;
}

.two {
  background: green;
  flex: 1;
}

.three {
  background: blue;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="wrap">

    <div class="two">
      Two
    </div>
    <div class="three">
      Three
    </div>
  </div>
</div>
0
sol