grid

📖 grid

페이지를 여러 주요 영역으로 분할할 때 사용

• flex는 1차원 레이아웃 시스템이지만 grid는 2차원 레이아웃 시스템으로 가로, 세로 배치가 동시에 이뤄질 수 있다.
• 기본 사용 구조 : flex와 동일한 방식인 grid container와 grid item으로 구성
• 컨테이너가 될 요소에게 grid 지정하면 자식 요소들은 Grid Items가 됨
• grid에도 column, row 개념 존재
• grid-template-columns와 grid-template-rows라는 속성으로 column, row 지정 가능

.container{
	display: grid;		//기본 사용 구조
}

grid-template-columns / rows

• 열의 개수와 폭 지정
• repeat를 사용해 반복값을 쉽게 설정할 수 있다.

repeat 사용법

grid-template-colums: repeat(반복횟수, minmax(최소크기, 최대크기));
grid-template-rows: repeat(반복횟수, minmax(최소크기, 최대크기));
// minmax는 변화를 막고 최소한의 크기를 유지할 수 있도록 하기 위한 속성이다.

grid-template 사용 예제

.container{
      border: 1px solid slateblue;
      display: grid;
    }
    .item{
      background-color: palevioletred;
      padding: 1rem;
      margin: 1rem;
    }
    .grid_col{
      grid-template-columns: repeat(3, minmax(50px, 1fr));
    }
  </style>

<div class="container grid_col">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>

repeat값을 통해 지정해준 것처럼 한줄에 3개씩 반복된다.

gap

grid item 사이의 공간 지정

<style>
    .container{
      border: 1px solid slateblue;
      display: grid;
    }
    .item{
      background-color: palevioletred;
      width: 100px;
      height: 100px;
      padding: 1rem;
    }
    .grid_col{
      grid-template-columns: repeat(3, minmax(50px, 1fr));
    }
    .gap{
      gap: 3rem;
    }
  </style>

<div class="container grid_col gap">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>

셀 병합

• grid-column-start : 특정 item을 표시하기 시작할 열을 지정
• grid-column-end: 특정 item을 표시하기 끝마칠 열을 지정
• grid-row-start : 특정 item을 표시하기 시작할 행을 지정
• grid-row-end: 특정 item을 표시하기 끝마칠 행을 지정

셀 병합 활용 예제

셀 병합 속성을 활용해 기본 레이아웃 구조를 표현하였다.