display: grid
그리드(Grid)는 컨테이너(Container)와 아이템(Item)으로 구성됩니다.
아래는 그리드를 위한 간단한 예제입니다.
<div class="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.item {
padding: 20px;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
컨테이너에 display: grid를 추가하면 그리드가 적용됩니다. 하지만 플렉스(flex)와는 달리 아래와 같이 코드를 추가해도 아무런 변화가 없습니다.
.item {
padding: 20px;
border: 1px solid #444444;
}
.container {
display: grid;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
행과 열에 대한 정의가 들어가야 그리드가 적용됨을 알 수 있습니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
display: inline-grid
inline-grid 속성을 사용하면 내용에 따라 차지하는 공간이 달라집니다.
.container {
display: inline-grid;
grid-template-columns: 1fr 1fr;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.