Grid 예제
높이가 같은 박스 만들기
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
}
.item {
padding: 20px;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
- 한 박스의 내용이 많아져 박스의 높이가 커지면, 다른 박스의 크기도 같이 늘어납니다. 즉, 가장 큰 박스의 높이에 맞춰집니다.
<div class="container">
<div class="item">Item 1<br>Item 1<br>Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.