공부기록/웹 개발
[CSS] Grid - gap
_우지
2022. 7. 17. 14:56
https://studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
GAP
gap 을 20px 을 준 레이아웃은 다음과 같다.
이전에는 grid-gap 이라는 이름으로 사용했다고 한다.
<style>
/* gap */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(100px, auto));
/* grid-gap: 20px; 예전 버전 */
gap: 20px;
}
</style>
row-gap
<style>
/* gap */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(100px, auto));
row-gap: 20px;
}
</style>
column-gap
<style>
/* gap */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(100px, auto));
column-gap: 20px;
}
</style>