Grid

2차원 레이아웃 구조, 왼쪽 위부터 지그재그 방향으로 정렬

grid container

• grid-template-rows : 행 높이 정렬(명시적)

• grid-template-columns : 열 너비 정렬(명시적)

  .container{
      display:grid;
      grid-template-rows:100px 100px;
      grid-template-columns: 200px 200px 200px;
  }

  .container{
    display: grid;
    /* grid-template-rows:50px 50px; */
    grid-template-rows: repeat(2, 50px);
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: repeat(8, 1fr);

  • fraction(사용 가능한 공간의 너비 비율) 단위 사용 가능
    • 행의 높이를 비율로 최대한 좁게(container에 높이 값이 지정이 되어있어야 함), 열의 너비를 최대한 길게 비율로 계산의 의미를 가짐.
  • repeat(개수, 요소당 차지하는 크기)로 단축 가능

• grid-auto-rows / grid-auto-columns: 암시적으로 행과열의 너비나 높이를 지정

• grid-auto-flow

  • dense : 빈 공간이 있으면 메움
  • row : 행 축을 기준으로 지그재그로 쌓음
  • column : 열 축을 기준으로 지그재그로 쌓음
  • row dense : 행 축을 기준으로 쌓으면서 빈공간 메움
  • column dense : 열 축을 기준으로 쌓으면서 빈공간 메움

• span : 아이템이 사용할 수 있는 셀이 몇개로 확장될 수 있는지 지정해줌

  .container .item:nth-child(1){
      grid-column: 2 / span 2;
  }

  왼쪽에서 2번 라인부터 2개의 셀만큼 확장해서 첫 번째 아이템을 만듬

• justify-content, align-cotnent : flex와 유사하지만 기본적으로 normal(stretch)값이 지정된다.

• justify-items: 셀 내부에서 수평 정렬 그리드 아이템이 하나의 셀 내부에서 행축과 열축이 빈공간이 있을때 속성 사용, space 속성 사용 X

• align-items: 셀 내부에서 수직 정렬 그리드 아이템이 하나의 셀 내부에서 행축과 열축이 빈공간이 있을때 속성 사용, space 속성 사용 X

• grid-template-areas : 영역제어 가능, 각각의 그리드 아이템에 영역의 이름 설정 해줘야 함

• grid-gap: 그리드 아이템 끼리의 여백, 그리드 에서는 여백들이 각각 번호가 있는데 Line(Gutter)이라고 부름

  grid-gap(gap): 10px 40px; // 행과행사이(grid-row-gap), 열과열사이(grid-column-gap)

grid items

Line

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

.container{
  width:300px;
  height:300px;
  border:4px solid;
  display:grid;
  grid-template-rows:repeat(3,1fr);
  grid-template-columns:repeat(3,1fr);
}

.container .item{
  border:2px solid;
  background:orange;
  font-size:20px;
}

flex와 다르게 grid는 위와 같이 라인을 가지고 있다.

grid-row / grid-column

• grid-row-start : 행 시작
• grid-row-end : 행 끝
• grid-column-start : 열 시작
• grid-column-end : 열 끝

위의 속성들을 지정해줘서 영역을 나타낼 수 있다.(음수도 가능)

.container .item:nth-child(1){
    grid-row-start : 2
    grid-row-end : 4
    grid-column-start : 2
    grid-column-end : 4
}

각각 단축 사용도 가능하다.

.container .item:nth-child(1){
    grid-row : 2 / 4
    grid-column : 2 / 4
}

span

확장의 의미를 가지며 기본값으로 1을 가진다.

.container .item:nth-child(1){
    grid-row-start: span 2;
    grid-column-start: span 2;
}

아이템이 쌓이는 순서(grid-auto-flow:row)에서 특정 아이템을 몇 개의 라인을 확장해서 늘린다는 의미

justify-self / align-self

그리드 컨테이너의 셀 안에서 각각의 그리드 아이템들을 수평/수직 정렬하는데 사용되는 justify-content, align-content의 개별 정렬 버전이다.

주의할점은 기본값이 normal 즉, stretch라서 너비나 높이가 지정되어 있지 않다면 최대한 늘어나려는 특징을 가진다.

order

순서를 의미한다.

기본적으로 요소들은 값이 0이며, 숫자가 작을수록 앞쪽에 위치한다.

.container .item:nth-child(1){
	order:1;
}

grid function & unit

명심해야 할점은 다음으로 소개되는 속성들은 한 개의 열 또는 한 개의 행 안에서 지정되는 속성들이다.

minmax

괄호안에 최소너비와 최대너비를 순서대로 설정한다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container{
  border:4px solid;
  display:grid;
  grid-template-rows:repeat(2,100px);
  grid-template-columns:minmax(100px, 1fr) minmax(200px, 1fr);
}

.container .item{
  border:2px solid;
  background:orange;
  font-size:30px;
}

처음에는 열끼리 너비가 같다가 전체너비가 좁아질수록 1:1 비율이 깨지면서 1번은 최소너비가 100, 2번은 최소너비가 200으로 설정되어있어서 100 200 상태에서 더 줄이면 오른쪽 요소가 바깥으로 넘친다.
또한 암시적으로 행과 열을 만들 때도 사용 가능하다.
ex) grid-auto-row: minmax(100px, auto);

fit-content

그리드 아이템이 가지는 컨텐츠의 너비를 최대 제한함

grid-template-columns:fit-content(300px) fit-content(300px);

min-content / max-content

• min content : 컨텐츠가 가질 수 있는 최소너비까지 그리드 아이템의 너비를 줄여서 표현

.container{
  border:4px solid;
  display:grid;
  grid-template-rows:100px;
  grid-template-columns:repeat(4, min-content);
}

.container .item{
  border:2px solid;
  background:orange;
  font-size:30px;
}

브라우저에서는 한글은 단어 단위가 아닌 글자 단위로 줄바꿈 처리하므로

word-break: keep-all; 단어단위로 처리하도록 변경 가능

• max content : 컨텐츠가 가질 수 있는 최대너비까지 그리드 아이템의 너비를 늘려서 표현

grid-template-columns:repeat(4, max-content);

auto-fit / auto-fill

명시적으로 몇 개의 행과 열을 사용할건지 지정해주지 않고 동적으로 설정해줌

• auto-fit: 지정할 수 있는 최대 너비를 우선해서 적용

  .container{
    border:4px solid;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows:100px;
  }

  

• auto-fill : 지정할 수 있는 최소 너비를 우선해서 적용

  .container{
    border:4px solid;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows:100px;
  }

마치며

그리드는 중요하다는 말만듣고 flex만 사용했었는데 내용이 굉장히 많은 것 같다.. 그래서 그런지 헷갈리기도 하고, 직접 몇번 코드를 쳐봐야지 이해할 수 있는 부분이라고 느꼈다.

이참에 2차원 구조에서는 그리드로 간편하게 구현해봐야겠다. 생각해보면 이전에 했던 프로젝트 중에서 2차원 구조를 flex로만 다루려고 하다보니까 다소 어려운 부분이 있었는데 그것을 리팩토링 해봐야 겠다.