아이템 사이의 간격 정하기
grid-column-gap, grid-row-gap, grid-gap은 그리드 아이템 사이의 간격을 정하는
속성입니다.
아래는 아이템 사이에 간격이 없는 간단한 그리드입니다.
<div class="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.item {
padding: 20px;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
grid-column-gap
grid-column-gap 속성으로 열 사이의 간격을 정합니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-column-gap: 20px;
}
.item {
padding: 20px;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
grid-row-gap
grid-row-gap으로 행 사이의 간격을 정합니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-row-gap: 20px;
}
.item {
padding: 20px;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
열과 행의 간격을 동시에 정하면 일정한 간격의 그리드를 만들 수 있습니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
.item {
padding: 20px;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
grid-gap
grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 첫번째 값은 행 사이의 간격, 두번째 값은 열 사이의 간격입니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 20px 10px;
}
.item {
padding: 20px;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
grid-gap의 값이 하나이면 열과 행 모두에 적용됩니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 20px;
}
.item {
padding: 20px;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.