[뒷북] TIL - Grid css

김현재·2022년 5월 3일
0
post-custom-banner

한참 전에 작성한 것인데 올리질 않았었다..
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와 동일하게 부모 요소인containeritem을 갖고 있으면 된다. 또한 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를 추가해서 사용이 가능하다.



더 많이 알고싶다면,

profile
쉽게만 살아가면 재미없어 빙고!
post-custom-banner

0개의 댓글