한참 전에 작성한 것인데 올리질 않았었다..
grid는 중요하니까 업로드!
=======================
프로젝트 중 list page도 담당하게 되었다.
list page이다 보니까 float: left
를 사용하여 li
를 가로배열 한 뒤 작업을 여차저차 해야겠다고 생각하던 중, 동희님✨께서 힌트를 주신 Grid
를 사용하여 작업을 진행하게 되었다.
display: flex
가 1차원 단방향(column or row) 레이아웃을 결정한다면, display: grid
는 양방향(column and row)을 활용하여 레이아웃을 결정한다.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
display:flex
와 동일하게 부모 요소인container
와 item
을 갖고 있으면 된다. 또한 styling 속성은 container
에 주게 된다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
먼저 grid를 선언함으로써 grid를 시작한다
grid-template-columns
각 그리드의 크기를 정하는 속성이다. fr
은 fraction을 뜻하며, 각 그리드의 비율을 나타낸다.
위의 경우는 전체 container에 1:1:1 비율로 그리드가 채워진다.
물론,200px 100px 100px
이런식으로 구체적인 숫자도 지정이 가능하며, columns
가 아닌 row
로도 선언이 가능하다.
gap
그리드 셀 사이의 간격을 나타낸다.
margin
을 사용하는 것과 동일하게 사용하면 된다.
사방에 10px씩 갭을 주고싶다면 gap: 10px
과 같이 작성하면 되고, 세로에는 10px 가로에는 20px씩 갭을 주고싶다면 gap: 10px 20px
이런 식으로 작성하면 된다.
또한, 가로에만 주고싶은 경우 row-gap
을 사용하면 되며, column-gap
을 사용하면 세로애만 갭을 줄 수 있다.
위의 것들은 grid를 만들기 위한 정말 최소한의 기본 조건들이다.
상황에 따라 이에 더 많은 attribute를 추가해서 사용이 가능하다.