TIL #24 CSS grid

JohnKim·2021년 5월 7일

CSS

목록 보기

9/9

grid

CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월하다.

grid layout 설정

그리드는 콘테이너(container)와 아이템(item)으로 구성된다.

container로 지정한 요소의 display에 grid를 지정한다.
display: grid;

flex와 다르게 grid만 지정해서는 아무 변화가 일어나지 않는다.

row & column

row: 행
column: 열

grid-template-columns

grid-template-columns 속성으로 열의 개수와 폭을 정한다.

속성값의 개수가 열의 개수이고, 각 속성값이 열 너비입니다.

예를 들어 html의 콘테이너안의 요소가 총 9개라고 가정한다.

<div class="jb-container">
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
    </div>

grid-template-columns의 속성을 100px 100px 두가지를 작성하면
grid-template-columns: 100px 100px;
열은 총 2개가 되고 행은 5줄이 된다.

속성값으로 픽셀을 지정할 수 있고,
퍼센트로 나눌수 있으며,
auto를 사용하여 나머지 공간을 지정할 수 있다.

예를 들어 속성값이 100px 50% auto라면 3열이 만들어지고, 1열의 너비는 100px, 2열의 너비는 50%, 3열의 너비는 남은 공간 전부가 된다.

만약 첫번째 열은 지정한 픽셀로 고정시키고 나머지 열을 비율에 맞추고 싶을 때에는 다음과 같이 사용한다.

grid-template-columns: 200px 1fr

grid-template-rows

grid-template-rows 속성으로 행의 높이를 정한다.
행의 높이가 지정되지 않은 경우 콘텐츠 높이에 맞추어 나온다.

grid-auto-rows

그리드에서 열 개수는 grid-template-columns로 정한다.
그 개수를 넘어가면 행이 바뀌는 형태이며 높이는 행마다 다르게 정해진다.
모든 행의 높이를 같게 만들기 위해서 grid-template-rows 속성을 추가하면,
그 속성에서 정의된 행만 높이가 같아집니다.
행의 개수가 정해진 상태가 아니라면, 즉 행의 개수가 더 늘어날 수도 있다면 CSS를 계속 고쳐야 한다는 문제가 생긴다.
이를 해결해주는 속성이 grid-auto-rows이다.
행의 개수가 늘거나 줄어도 일정한 값을 적용받게 해준다.

<div class="jb-container">
      <div class="jb-item">Item<br>Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
      <div class="jb-item">Item</div>
    </div>

container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
}

fr

fr 단위는 비율을 의미한다. 예를 들어 속성값이 1fr 2fr 3fr라면 1:2:3의 비율로 3열을 만든다.

grid-template-columns: 1fr 2fr 3fr;

repeat

repeat를 이용하면 반복되는 값을 간편하게 넣을 수 있다.

container{
display: grid;
  grid-template-columns: repeat( 3, 1fr );
  }

위의 값은 1fr 1fr 1fr과 같다.

다음은 1fr 2fr을 3번 반복하라는 뜻이다.

container {
  display: grid;
  grid-template-columns: repeat( 3, 1fr 2fr );
  }

즉, 1fr 2fr 1fr 2fr 1fr 2fr과 같다.

grid gap

그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap이다.
grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형이다.

grid-column-gap: 20px;