[데브코스] TIL-115 CSS Grid

Grid란?

 

  2차원 레이아웃 구조를 만드는데 사용한다. row와 column 2개의 축을 사용해서 레이아웃을 작업한다. display: grid를 적용한 곳을 grid container라고 하고, 그 하위 요소들을 grid items라고 부른다. 수평 정렬 시, grid 또는 inline-grid를 사용할 수 있다.

• grid: grid container가 block 요소의 특징을 가진다.
  • 수직 정렬, 가로 너비를 최대로, 세로 너비를 최소로 하려는 특징

• inline-grid: grid container가 inline 요소의 특징을 가진다.
  • 수평 정렬, 가로 세로 너비를 최소로 하려는 특징

---

grid container에 적용할 수 있는 속성들에 대해 알아보자.

1. grid-template-rows

  행 축의 개수와 너비를 명시적으로 지정한다. fraction(fr) 단위를 사용하면 공간 비율을 나타내어 표현할 수 있다. 또, repeat(숫자, 반복할 길이)이라는 함수를 사용하여 편리하게 나타낼 수 있다. 여기서 fr을 쓰려면 grid container에 height가 지정되어 있어야 한다. height의 기본값은 auto이기 때문에 지정되어 있지 않으면 화면에 나타나지 않는다.

2. grid-template-columns

  열 축의 개수와 너비를 지정한다. 사용법은 grid-template-rows와 동일하다. 위의 두 속성을 적용하면 아래와 같이 2개의 행과 3개의 열을 가진 레이아웃이 완성된다.

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

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

3. grid-auto-rows

  명시적으로 나타낸 범위를 벗어나는 경우 암시적인 부분을 기준으로 행이 나타나게 된다. 이 때 사용하는 속성이 바로 grid-auto-rows이다.

4. grid-auto-columns

  명시적으로 나타낸 범위를 벗어나는 경우 암시적인 부분을 기준으로 열이 나타나게 된다. 이 때 사용하는 속성이 바로 grid-auto-columns이다.

5. grid-auto-flow

• row: 행 축을 기준으로 item을 쌓는다.

• dense: 축을 기준으로 item이 쌓이는데 빈 공간이 존재하면 그 공간을 채우며 item을 쌓는다.

• column: 열 축을 기준으로 item을 쌓는다.

  grid container 안에서 grid contents를 제외하고 빈 공간이 있다면 grid contents를 정렬할 수 있다. 만약 빈 공간이 없다면 아래 두 속성은 사용할 수 없다.

6. justify-content

  grid contents을 행 축 기준으로 정렬할 수 있다.

• normal: 기본 값으로 stretch와 같은 역할을 함
  • width가 지정되어 있는 경우 적용이 되지 않음
• start: 행 축이 시작되는 지점
• center: 행 축의 가운데 지점
• end: 행 축이 끝나는 지점
• space-between: 행 축의 시작점과 끝점에 붙고 나머지 공간을 균등하게 분배해서 정렬
• space-around: 각 item의 양쪽 여백이 같게 정렬
• space-evenly: 모든 여백을 균등하게 정렬

7. align-content

  grid contents을 열 축 기준으로 정렬할 수 있으며, justify-content에서 사용하는 값들과 같다. grid로 만들어진 영역 중에 하나의 영역을 cell이라고 한다. 이 cell 내부에 grid items가 들어가게 되는데 그 내부에 빈공간이 있다면 아래의 속성들을 사용할 수 있다.

8. justify-items

  grid item들을 행 축을 기준으로 정렬한다. 기본 값은 normal이며 start, center, end 값을 사용할 수 있다.

9. align-items

  grid item들을 열 축을 기준으로 정렬한다. 기본 값은 normal이며 start, center, end 값을 사용할 수 있다.

10. grid-template-areas

  grid-area를 먼저 정의하고, 영역 이름을 통해 grid를 제어하는 속성이다.

.container {
  border: 4px solid;
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'header header header'
    'main main aside'
    '. . aside' /* 'none none aside' */
    'footer footer footer';
}

.container > * {
  border: 2px solid;
}

.container header {
  grid-area: header;
}

.container main {
  grid-area: main;
}

.container aside {
  grid-area: aside;
}

.container footer {
  grid-area: footer;
}

  grid에서 item과 item 사이의 여백은 line 또는 gutter라고 부른다.

11. grid-gap

  (grid-)row-gap과 (grid-)column-gap의 단축 속성으로 item 사이의 여백을 지정할 수 있다. grid-gap: 10px 40px이라고 작성하면 행 사이의 여백 10px, 열 사이의 여백 40px이 적용된다.

 

12. grid-row

span 2를 적용한 모습

 

---

grid items에 적용할 수 있는 속성들에 대해 알아보자.

1. grid-row(column)-start

  각 행(열)에 몇 번 line에서 시작할 것인지 나타내는 속성이다. line 번호를 넣을 수도 있지만, span 숫자를 넣을 수 있다. 여기서 숫자의 기본 값은 1이며, line의 번호가 아닌 몇 개의 line을 늘릴 것인지를 의미한다.

2.  grid-row(column)-end

각 행(열)에 몇 번 line에서 끝날 것인지 나타내는 속성이다.

위의 4가지 속성을 적용하면 아래와 같다.

 

.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-color: orange;
  font-size: 20px;
}

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

3. grid-row(column)

  grid-row(column)-start와 grid-row(column)-end의 단축 속성이다. grid-row: 1 / 3 이렇게 작성하면 start line이 1이고 end line이 3임을 의미한다.

4. justify-self

  행 축을 기준으로 하나의 item을 개별적으로 정렬할 수 있다. 기본 값은 normal이며, width가 지정되지 않은 경우 적용된다. start, center, end 값을 사용할 수 있다.

5. align-self

  열 축을 기준으로 하나의 item을 개별적으로 정렬할 수 있다. 기본 값은 normal이며, height가 지정되지 않은 경우 적용된다. start, center, end 값을 사용할 수 있다.

6. order

  숫자에 따라 item이 정렬된다. 기본 값은 0이며, 숫자가 작을수록 먼저 배치되며 양수, 음수 모두 가능하다.

7. z-index

  position, flex, grid를 사용할 때 요소의 쌓임 순서를 변경하고 싶다면 사용할 수 있다. 숫자가 클수록 위에 쌓이게 된다. 기본 값은 0이며 양수, 음수 모두 가능하다. grid에서 사용할 수 있는 CSS 함수들에 대해 알아보자.

8. repeat(반복횟수, 너비)

.container {
	/* grid-template-rows: 100px 100px 100px; */
	grid-template-rows: repeat(3, 100px);
	
	/* grid-template-columns: 100px 200px 100px 200px; */
	grid-template-columns: repeat(2, 100px 200px);
}

9. minmax(최소값, 최대값)

  grid-template-rows(columns), grid-auto-rows(columns)에서 각 행(열)의 최소값과 최대값을 동시에 명시할 수 있다.

.container {
	grid-template-columns: minmax(100px, 1fr), minmax(200px, 1fr);
	grid-auto-rows: minmax(100px, auto);
}

10. fit-content(최대값)

  기본적으로 content에 맞춰 너비가 결정되며, 최대로 늘어나는 값을 넣어 무한으로 늘어나는 것을 제한한다.

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

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

---

grid에서 사용할 수 있는 단위들에 대해 알아보자.

1. fraction (fr)

  사용 가능한 (나머지) 공간 너비 비율을 나타내는 단위이다.

2. max(min)-content

  요소 내 content가 가지고 있는 가장 긴(짧은) 너비를 기준으로 행 또는 열의 너비를 지정하는 단위이다.

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

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

3. word-break

  텍스트가 자신의 콘텐츠 밖으로 넘칠 때 줄바꿈에 대한 처리를 어떻게 할지에 대한 속성이다.

• normal: 기본 값
• keep-all: 한중일 텍스트에서 단어 단위로 나타내고 싶을 때 사용

.container .item {
  border: 2px solid;
  background-color: orange;
  font-size: 30px;
	word-break: keep-all;
}

4. auto-fit, auto-fill

  repeat(반복횟수, 너비) 함수와 함께 사용하는 단위이다. 개수 부분에 넣어주면 되고, 너비 부분에는 minmax()를 사용한다. 브라우저가 자동으로 몇 번 반복할지 알아서 정해주게 된다. auto-fit은 최대 너비를 우선해서, auto-fill은 최소 너비를 우선해서 지정한다.

 

 

오늘을 마무리 하며

 

  오늘은 Flex에 이어서 Grid에 대해서 공부했다. 단순히 지식적인 부분을 습득한 것이기 때문에 뭔가에 대한 의문을 갖거나 깨달은 부분은 없으나 Flex보다는 한 층 고차원적인 display 속성이라는 느낌을 받았다. 이제 막 flex로 박스들을 쌓는 방법들에 익숙해졌고, Grid를 사용해야 하는 상황에 직면하지 못했고, 아직 회사에서는 flex 속성을 더 많이 사용한다고 들었기 때문에 필요성이 와닿지는 못한것이 사실이다.  그러나 앞으로 프로젝트를 진행하면서 한 번쯤은 Grid 속성을 사용해야만 하는 상황이 발생할 수 있기 때문에 본 내용을 요약해 놓고 필요할 때 위에 정리해 놓은 내용을 토대로 적용해 보아야겠다.