CSS 그리드 문제. 사이드 컬럼 증가 중지 [중복]
Aug 19 2020
1 Grid에 대한 도움이나 설명이 필요합니다. 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를 생성하여 원하는대로 포맷 할 수 있습니다.