[CSS] Grid

flex와 함께 자주 사용되는 CSS의 Layout 기능

사용

1) 형태

<div class="container">
  <div class="item">BOX1</div>
  <div class="item">BOX2</div>
  <div class="item">BOX3</div>
 <div>

부모요소인 Grid container class와 자식 요소의 다수의 Gred item class로 이루어진다.

부모는 Grid의 영향을 받는 전체 공간을 나타내며, 속성으로 자식의 정렬과 관계된 설정들을 갖는다. 자식은 부모의 속성과 스스로의 속성을 통해 부모공간 내에 배치된다.

2) 부모(Grid container)속성

• display display: grid; 또는 display: inline-grid; 로 사용하여 부모(Grid container)임을 선언하는 속성 grid와 inline-grid는 container가 주변 요소와 어떻게 배치될지에 따라 다름. inline-grid는 inline-block과 같이 동작

• grid-template-rows, grid-template-columns Grid 트랙의 크기를 정하는 속성

  grid-template-rows: 200px 2fr 1fr;
  grid-template-rows: 200px 200px auto;
  /* 속성값의 갯수는 열의 갯수를 의미한다. */
  /* px, fr 단위와 auto를 사용할 수 있고 혼합사여 사용도 가능하다. */
  /* 1fr은 비율을 의미한다. 1fr 1fr 이라면 1fr은 50%, 1fr 2fr 1fr이라면 1fr은 25% */
  grid-template-rows: repeat(3, 1fr)
  /* repeat(반복횟수, 반복할 값) : 1fr 1fr 1fr 을 위와같이 repeat으로 표시할 수 있다.*/
  

• minmax 트랙의 최소와 최대값을 정하는 함수

  grid-template-rows: repeat(3, minmax(100px, auto));
  

• auto-fill과 auto-fit 아이템의 갯수가 컬럼의 갯수보다 부족할 때 처리할 방법을 설정하는 속성값

  grid-template-columns: repeat(auto-fill, minmax(100px, auto));
  /* auto-fill은 남은 공간을 비움*/
  /* auto-fir은 남은 공간에 맞춰 item의 크기를 늘림*/
  

• gap 아이템 간 간격 설정 gap:10px; : row, column 간격 모두 10px gap:10px 20px : row 간격 10px, column 간격 20px row-gap:10px; : row 간격 10px column-gap:10px; : column 간격 10px
• grid-auto-columns, grid-auto-rows grid-template-rows와 grid-template-columns의 통제를 벗어난 위치에 있는 트랙의 크기를 설정 즉, 행 또는 열의 갯수를 정확히 알 수 없을 때의 설정 grid-auto-rows: minmax(100px, auto);

참조

• https://studiomeal.com/archives/533