[개발일기] Grid

(2023.05.24)

현대의 웹 페이지에서 grid는 매우 유용하다.

컨테이너를 만들고 그 안의 아이템들을 자유롭게 배치할 수 있다. 잘 알아두자.

 

/* 그리드 컨테이너를 먼저 만든다. 이 상태면 아무일도 일어나지 않는다. */ 
.container {
  display: grid;
}

/* column은 열이다.
   컨테이너 안에 아이템을 가로로 나눈다. fr은 fraction(부분,분수)이며 1:1 비율로 나눈다.
   원하는 부분을 fr대신 px로 해도 됨. 100px 1fr 이런식으로.
*/
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* row는 행이다.
   컨테이너 안에 아이템을 세로로 나눈다.
*/
.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

/* 컨테이너 안에 아이템을 가로,세로 격자형식으로 나눌 수 있다. */
.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}