한참 전에 작성한 것인데 올리질 않았었다..
grid는 중요하니까 업로드!
=======================
프로젝트 중 list page도 담당하게 되었다.
list page이다 보니까 float: left를 사용하여 li를 가로배열 한 뒤 작업을 여차저차 해야겠다고 생각하던 중, 동희님✨께서 힌트를 주신 Grid를 사용하여 작업을 진행하게 되었다.
display: 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를 추가해서 사용이 가능하다.
더 많이 알고싶다면,
