grid(1)

레이아웃을 구현할 때는 flex를 쓰면 편리할때가 많다.

flex만으로 레이아웃을 구현하는 데 큰 문제는 없지만, 보다 정교하고 복잡한 레이아웃에 편리한 grid에 대해 알아보자.

---

1. flex와 grid의 차이점

flex와 grid의 가장 크 차이점은 flex는 한방향 grid는 양방향이라는 점이다.

따라서 flex보다 더 복잡한 레이아웃 표현이 가능하는 장점이 있다.

 

---

 

2. grid구성 알아보기

 

 

‖ 그리드 컨테이너 (Grid Container)

display: grid를 적용하는, grid의 전체 영역이다. grid 컨테이너 안의 요소들이 grid 규칙의 영향을 받아 정렬된다고 생각하면 되는데

위 코드는 <div class=”container”></div>가 grid 컨테이너이다.

‖  그리드 아이템 (Grid Item)

Grid 컨테이너의 자식 요소이다. 이 아이템들이 grid 규칙에 의해 배치된다.

위 코드에서는 <div class=”item”></div>들이 Grid 아이템이다.

‖  그리드 트랙 (Grid Track)

Grid의 행(Row) 또는 열(Column) 그리드 셀 (Grid Cell) grid의 한 칸을 가리키는 말이다. <div>같은 실제 html 요소는 그리드 아이템이고, 이런 grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 된다.

‖  그리드 라인(Grid Line)

grid 셀을 구분하는 선이다.

‖  그리드 번호(Grid Number)

grid 라인의 각 번호이다.

‖  그리드 갭(Grid Gap)

grid 셀 사이의 간격이다.

‖  그리드 영역(Grid Area)

grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합이다.

 

---

3. 이제 그리드를 작성해보자

1. 부모요소에 그리드 선언

flex를 display: flex; 으로 선언하여 썼던 것처럼, grid도 display:grid;를 선언해서 쓴다.

일단 컨테이너가 될 요소에게 grid를 주면 그때부터 자식 요소들은 grid Items이 된다.

.container {
  display: grid;
}

grid를 주면 자식 요소들은 block 속성이 되고, inline-grid를 주면 Inline 속성이 된다. (flex와 비슷하다)

파이어폭스의 개발자 도구를 열어, grid라고 표시된 부분을 클릭하면 아래 그림처럼 격자 모양의 grid 컨테이너를 쉽게 확인해 볼 수 있다.

 

---

4. 자식요소 구성 (grid-template-*)

1. column과 row

grid에는 column(세로/열)과 row(가로/행)가 있으며 이것들을 트랙(Track)이라고 부른다.

자식요소에는 grid-template-columns와 grid-template-rows라는 속성을 써서 지정해 줄 수 있다.

이때, "column이 3개니까 값을 3으로 주면 되나?" 싶을 수도 있는데, 정확히는 각 row의 "크기값"을 입력해야 하며 여러가지 단위를 사용할 수 있고 섞어서 쓸 수도 있다.

트랙을 구성하는 여러가지 방법에 대해서 알아보자

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

이번에는 다른 값을 주었다.

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

 

2. repeat 함수와 fr

만약 100px크기를 가지고 있는 10칸의 컨테이너를 만든다고 할때, grid-template-column: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;이라고 만들 수 있지만 너무 번거롭다.

이때 쓸 수 있는 것이 repeat 함수다.

grid를 쓰다보면 아이템 크기를 비율로 지정하고 싶을 때가 있는데 이때 %를 사용해도 되지만, 유지보수 등을 고려해 좀 더 유연한 단위를 지정하고 싶을 경우에는 fr 단위를 사용하는것이 좋다.

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

각 아이템이 1/3만큼의 column을 차지한 걸 볼 수 있다. 3의 fr 중에서 1만큼 차지하는 것이다.

 

3. minmax 함수

최솟값과 최댓값을 지정할 수 있는 함수도 있는데 minmax이다. 예를들어 minmax(100px, auto)의 의미는 '최소한 100px, 최대는 자동으로(auto) 늘어나게' 라는 뜻이다.

즉 아무리 내용의 양이 적더라도 최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 알아서 늘어나도록 처리해 주는 것이다.

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

첫번째는 auto로 주었고, 두 번째는 grid-template-rows: repeat(3, minmax(100px, auto))로 지정한 결과다.

100px이하로는 줄어들지 않는다는 것을 알 수 있다.