CSSグリッドの問題。サイドカラムの成長を停止する[重複]
Aug 19 2020
1グリッドに関するヘルプまたは説明が必要です。1には2つのグリッド列があります。私の列のグリッドコンテンツの1つのテキストが大きくなると、もう1つの列も同じように大きくなります。1内容は常に変化するため、静的な高さを指定したくありません。1:どうすればこれを止めることができますか?これがライブバージョンのコードペンです-コードPENの例
.container {
margin: 0 auto 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 0rem 2.4rem;
}
.main {
grid-column: 1/ 9;
background: red;
}
.side {
grid-column : 9/13;
background: red;
}
<div class="container">
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti voluptatem minima tenetur, quidem consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
</div>
<div class="side">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ipsum.
</div>
</div>
回答
Tomas Aug 19 2020 at 01:48
height: fit-content;
列側に設定すれば十分です。
tacoshy Aug 19 2020 at 01:52
簡単な答え:できません!グリッドはテーブルのようなものです。行の高さからのグリッドが[自動]に設定されている場合、同じ行内のalrgest要素を適応させます。
.container {
margin: 0 auto 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 0rem 2.4rem;
}
.main {
grid-column: 1/ 9;
background: red;
}
.side {
grid-column : 9/13;
}
.sideSub {
background-color: red;
}
<div class="container">
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti voluptatem minima tenetur, quidem consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
</div>
<div class="side">
<div class="sideSub">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ipsum.
</div>
</div>
</div>
ただし、グリッドセル内にdiVを作成して、必要に応じてフォーマットすることができます。