다음과 같은 코드가 있다. 레이아웃은 어떻게 될까?
<style>
/* minmax */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
</style>
<body>
<div class="grid-container">
<div class="grid-item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, qui.
</div>
<div class="grid-item">B</div>
<div class="grid-item">C</div>
<div class="grid-item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum commodi,
amet eligendi consectetur dolores quae, omnis nulla debitis
reprehenderit voluptatum sapiente impedit culpa dolor voluptatem
pariatur minima non. Modi cum perferendis enim a iure eos voluptate,
maxime voluptatibus dolor voluptatum.
</div>
<div class="grid-item">E</div>
<div class="grid-item">F</div>
<div class="grid-item">G</div>
<div class="grid-item">H</div>
<div class="grid-item">I</div>
</div>
</body>
그런데 나는 첫번째 행과 세번째 행의 높이가 조금 낮은 것 같아서 최소 높이를 지정해주고 싶다.
그럴때 어떻게 해야할까?
minmax
다음처럼 코드를 바꾸어준다.
<style>
/* minmax */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(100px, auto));
/* grid-template-rows: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto); */
}
</style>더보기
minmax( ) 함수의 첫번째 파라미터는 최소높이, 두번째 파라미터는 최대 높이를 의미한다.
따라서 위 코드에서는 최소 높이를 100px로 지정했기 때문에 원래 div 높이가 그것보다 작았던 첫번째행과 세번째행은 높이가 100px이 되는 것이다.
'공부기록 > 웹 개발' 카테고리의 다른 글
| [CSS] Grid - gap (0) | 2022.07.17 |
|---|---|
| [CSS] Grid auto-fill , auto-fit (0) | 2022.07.17 |
| [Css] Grid (0) | 2022.07.17 |
| UI에서 이후 이벤트 발생 제한하기. (0) | 2022.07.16 |
| hello skin 에서 마우스 오버 UI 구현하기 (0) | 2022.07.16 |