CSSグリッドのアイテムは残りのスペースを占有するには？

Question

私は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>

Answer 1

あなたは:)後にしている正確に何を取得します。

.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>

イェンス編集：grid-template-rows: 1fr auto;、少なくともこの正確な場合：これは代わりに使用することができ、より良いブラウザのサポートについてします。

Answer 2

これは的外れな方法であれば、私は謝罪ので、グリッドに新たなんです。

可能なアプローチは、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>

Answer 3

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

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>

そうしないと、フレキシボックスソリューションを試すことができます。あなたの.gridにgrid-template-rows: 1fr min-content;を追加

.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>