[Front-End] CSS 배우기 : Grid

그리드(Grid)란?

CSS Grid를 사용하여 전체 웹 페이지를 배치할 수 있다. Flexbox는 주로 1차원 레이아웃에 항목을 배치하는 데 유용하고, CSS 그리드는 2차원 레이아웃에 가장 유용하며 행과 열 모두에서 요소를 정렬하고 이동하는 데 사용할 수 있는 많은 도구를 제공한다.

 

 

Grid 생성

그리드를 설정하려면 grid container와 grid items가 있어야 한다.

그리드 컨테이너는 그리드 항목을 자식으로 포함하고 전체적인 스타일과 위치를 적용하는 부모 요소이다.

HTML 요소를 그리드 컨테이너로 전환하려면, 요소의 display속성을 grid(블록 수준 그리드의 경우) 또는 inline-grid(인라인 그리드의 경우)로 설정해야한다. 그런 다음 다른 속성을 할당해서 그리드를 배치해야 한다.

 

 

Column과 Row 생성

기본적으로 그리드에는 열이 하나만 포함된다. 항목 추가를 하면 각 항목이 새 행에 배치된다.

이를 변경하려면 그리드의 행과 열의 개수를 명시적으로 정의해야 한다.

grid-template-columns 속성을 사용하여 열의 개수와 각 열의 너비를 설정하여 그리드의 열을 정의할 수 있다.

grid-template-rows 속성을 사용하여 행의 수와 행의 크기를 지정할 수 있다.

단위는 픽셀, 백분율(%)로 표현할 수 있고 두 개를 함께 사용해도 된다.

 

ex)  각 너비와 크기를 가지는 2개의 열과 3개의 행이 있다.

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
  grid-template-rows: 10% 20% 600px;
}

 

☞ grid-template 속성을 사용하여 한 줄로 표현할 수 있다.

ex) 2개의 행과 3개의 열이 있다. 슬래시(/)의 앞은 행의 크기를, 뒤는 열의 크기를 결정한다.

.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;
}

 

분수(Fraction)

CSS Grid는 fr 분수라는 상대적 크기 단위를 사용할 수 있다.

다른 단위들과 함께 사용 가능하다.

 

ex) 3개의 행과 3개의 열이 있다. 행은 400 픽셀을 네 부분으로 나누고, 열은 1000 픽셀을 다섯 부분으로 나눈다.

.grid {
  display: grid;
  width: 1000px;
  height: 400px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;
}

첫 번째 행은 2/4, 두 번째와 세 번째 행은 1/4 -> 첫 번째 행의 높이는 200 픽셀, 두 번째 및 세 번째는 100 픽셀

첫 번째 열은 1/5, 두 번째 열은 3/5, 마지막 열은 1/5 -> 각각 200 픽셀, 600 픽셀, 200 픽셀

 

반복(Repeat) 함수

repeat() 함수를 값으로 사용하여 그리드의 행과 열 수를 정의하는 속성을 표현할 수 있다.

 

ex) 너비가 각각 100 픽셀인 3개의 열이 있다. (= grid-template-columns: 100px 100px 100px; )

.grid {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(3, 100px);
}

☆ repeat(5, 1fr)처럼 fr단위를 활용하여 테이블을 5개의 동일한 행 또는 열로 분할하여 유용하게 사용할 수 있다.

+) grid-template-columns: repeat(2, 20px 50px) -> 첫 번째와 세 번째 열의 너비가 20 픽셀, 두 번째와 네 번째 열의 너비가 50 픽셀인 4개의 열 생성.

 

최소 최대 함수

모든 그리드는 고정된 크기인데 때로는 웹 브라우저의 크기에 따라 격자 크기를 조정할 수 있다.

minmax() 함수를 사용하여 행 또는 열이 너무 크거나 작아지는 것을 방지할 수 있다. 

 

ex) 첫 번째, 세 번째 열은 격자 크기에 관계없이 항상 100 픽셀 너비이다.

두 번째 열은 전체 그리드 크기 조정에 따라 너비가 항상 100 ~ 500 픽셀로 달라진다.

.grid {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px;
}

 

그리드 gap

grid-row-gap과 grid-column-gap 속성을 사용하여 그리드의 모든 행과 열 사이에 빈 공간을 둘 수 있다.

grid-gap을 사용할 때 그리드의 시작 또는 끝에 공백을 추가하지 않는다는 점에 유의. 

 

ex) 3개의 열이 있고 사이에 10 픽셀 간격이 두 개 있다. 그리드는 폭이 320 픽셀이고 이 중 20 픽셀이 두 그리드 간격에 의해 차지된다.

.grid {
  display: grid;
  width: 320px;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}

 

☞ grid-gap 속성을 사용하여 행과 열 간격을 한 줄로 표현할 수 있다.

ex)  grid-gap: 20px 10px; -> 행 사이의 거리를 20 픽셀로, 열 사이의 거리를 10 픽셀로 설정한다.

+) 다른 CSS 그리드 속성과 달리 값 사이 슬래시(/) 사용 X, 값이 하나만 제공되면 열 간격과 행 간격을 해당 값으로 설정.

 

---

여러 항목(item)

grid-row-start, grid-row-end와 grid-column-start, grid-column-end로 단일 그리드 항목이 여러 행과 열을 차지하도록 만든다.

이를 통해 외부 그리드 컨테이너에 CSS를 적용하지 않고 그리드 안에 있는 요소에 CSS를 추가할 수 있다.

행 그리드 선과 열 그리드 선은 1에서 시작하여 그리드에 있는 행 또는 열 수보다 1 큰 값에서 끝난다.

 

ex) item 클래스의 HTML요소는 그리드에서 두 행을 차지한다.

.item {
  grid-row-start: 1;
  grid-row-end: 3;
}

ex) 행 2, 3, 4를 포함하는 요소에는 grid-row-start: 2과 grid-row-end: 5 선언이 있어야 한다.

두 속성 모두 음수 값을 가질 수도 있다.

 

☞ grid-row와 grid-column 속성을 사용하여 한 줄로 표현할 수 있다. 시작은 슬래시(/) 앞에 오고 끝은 뒤에 온다.

.item {
  grid-row: 4 / 6;
}

 

★ span을 사용하여 다른 쪽 끝을 기준으로 열이나 행을 시작하거나 끝낼 수 있다.

.item {
  grid-column: 4 / span 2;
}

 item요소가 4열에서 시작하여 2열의 공간을 가진다. 따라서 4 열과 5열을 차지할 것이다. 

<!-- 모두 같은 의미 -->
.item {
  grid-column: 4 / 6;
}

.item {
  grid-column-start: 4;
  grid-column-end: span 2;
}

.item {
  grid-column-start: span 2;
  grid-column-end: 6;
}

 

☞☞ grid-area 속성을 사용하여 grid-row과 grid-column 속성을 한 줄로 표현할 수 있다. 

ex) 항목은 2행과 3행을,  3 ~ 8열을 차지한다.

.item {
  grid-area: 2 / 3 / 4 / span 5;
}

슬래시 앞과 뒤의 순서가 중요하고 1. grid-row-start 2. grid-column-start 3. grid-row-end 4. grid-column-end로 지정.