[CSS] GRID 레이아웃 기본편 - 이 정도는 알아두자

해당 포스트는 필자가 이전에 작성해둔 TIL을 수정해서 재작성한 글입니다.

GRID란 무엇인가

• 격자 구조를 만드는 행과 열, 모듈로 구성 - Grid Layout GuideBook
• 비율을 자유자재로 변경시키고 레이아웃의 균형을 쉽게 맞출 수 있음.
• 예전에는 table을 사용해 레이아웃을 잡기도 했는데 해당 방법은 depth가 깊어져 사용성이나 접근성면에서 좋지 않았는데, GRID를 사용하면 그런 문제 없이 최소한의 마크업과 css로 쉽게 구현 가능함.
• 다양한 디바이스에 최적화된 인터페이스를 미디어 쿼리와 함께 사용하여 쉽게 제공할 수 있음 (반응형 디자인에 최적화)
• 인터넷 익스플로러에서 지원하지 않는 관련 속성이 다수 있음

Grid와 Flexbox의 차이점

• 가장 큰 차이점은 flexbox는 1차원적인 정렬 (행 또는 열)에 적합하다면 css grid는 2차원 방향으로 (행과 열 동시에) 배치 또는 정렬이 가능하다는 점.
• 두 가지 방법 모두 유용하기 때문에 상황에 맞게 쓰면 됨 (열이나 행에 대한 1차원 정렬은 flexbox, 열과 행에 두 가지 모두를 고려한 레이아웃을 구사할 때는 grid).

관련 용어 / 속성

Grid - 행(rows)과 열(columns)를 가지며 그리드 아이템을 배치할 수 있음

display: grid;

특정 요소 스타일에 위 속성을 적용하면 요소가 grid container가 되며 자식 요소는 그리드 아이템이 되어 배치됩니다.

그리드 속성을 제대로 사용하기 앞서 템플렛을 설정해줘야 하는데 행은 grid-template-rows , 열은 grid-template-column을 이용하시면 됩니다.

 

 

이런 식으로 3x3 모든 셀이 균등한 그리드 템플릿을 만들고 싶다면 아래와 같이 css를 작성해주면 됩니다.

 

grid-template-rows: repeat(3, 1fr); /*1fr 1fr 1fr*/
grid-template-column: repeat(3, 1fr); /*1fr 1fr 1fr*/
/*동일한 너비를 가진 열이나 행을 만들고 싶다면 repeat를 사용해 여러번 반복가능 */

 

여기서 1fr는 1 fraction을 뜻하며 그리드 컨테이너 내의 공간 비율을 분수로 나타내서 표기하기 위해 사용합니다. 여기서 1fr 대신 repeat(3, 33%)를 쓸 수도 있지만 1fr을 사용해 각각의 열과 행이 1/3을 차지한다는 걸 명시해주는 게 더 정확합니다.

 

앞서 말했듯이 단위를 꼭 fr을 써야 하는 건 아니고 상황에 맞게 여러 개를 함께 써야 할 때도 있습니다.

 

 템플릿을 아래와 같이 설정한 뒤 각자의 요소에게 색깔을 입혀보겠습니다.

grid-template-columns: 200px auto 1fr 2fr;

 

이런 식으로 첫 번째 column은 고정값으로 200px를 갖게 되고 2번째는 auto지만 콘텐츠가 없기 때문에 너비를 할당받지 않았습니다. 3번째 column(초록색) 은 남은 공간 중 1/3을 차지하고 4번째(파란색)는 2/3을 차지하게 되었습니다.

 

만약 auto값을 할당한 두 번째 column에 콘텐츠가 추가된다면 그만큼이 늘어나고 나머지 column은 남은 자유공간의 1/3과 2/3을 각각 할당받게 되는 걸 확인 하실수 있습니다.

 

 

---

Grid Line - Grid를 그리는 가로/세로 선. Grid 아이템을 배치하는 기준이 됨. 예) grid-column-start: 2; 여기서 2는 두 번째 칼럼을 가리키는 게 아니고 gridline을 가리킴

---

 

Grid Cell(Unit) - 4개의 그리드 라인으로 그려지는 공간(블록)

위 예제와 같이 중앙에 있는 grid-cell에 요소를 배치시키고 싶다면 아래와 같이 작성해주시면 됩니다.

 

  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 2;
  grid-row: 3;

 

셀단 위를 선택할 때는 start나 end 중 하나만 명시해줘도 작동하기 때문에 이런 표기법도 가능합니다

 

  grid-column-start: 2; /*또는 grid-column-end: 3*/
  grid-row-start: 2; /*grid-column-end: 3*/

 

단축 표기법으로는, grid-area: grid-row-start, grid-column-start, grid-row-end, grid-column-end를 사용하면 됩니다.

이 속성은 하나의 cell을 선택할 때보단 여러 셀이 합쳐진 영역을 나타낼 때 많이 쓰입니다.

 

  grid-area: 2 / 2/ 3 / 3;

---

위와 같은 방법으로 특정한 요소가 그리드 어느 지점에 위치할 것인지 지정해줄 순 있지만 생각보다 많이 번거롭게 느껴질 수가 있습니다.  그런 분들을 위해 각 영역에 이름을 grid-area로 지정해준 뒤 grid-teample-areas 속성으로 지정한 이름을 사용하여 배치하는 직관적인 방법도 존재합니다.

 

.sidebar {
grid-area: sidebar
}

.footer {
grid-area: footer
}

.main {
grid-area: main
}

.container {
	grid-template-areas:
	  "sidebar main main"
	  "sidebar main main"
	  "footer footer footer"
}

/* 중간에 비워둘곳은 영역이름이 아니라 . 또는 none으로 표기 */

---

Grid Gutters - 행 또는 열 사이의 간격.

  grid-gap: 10px; /*행과 열사이에 10px의 간격이 추가됨*/

행과 열 각각 다른 간격을 주고 싶다면 아래와 같이 단일 속성을 사용해주시길 바랍니다.

  grid-row-gap: 5px;
  grid-column-gap: 10px;

---

이번 포스트에서는 CSS의 가장 기본적인 부분만 살펴보았습니다. 이후에도 정렬하는 방법, 위치 변경하는 방법 등 추가적으로 알아두면 좋은 방법들에 대해서는 추후에 새로운 포스트로 찾아뵙도록 하겠습니다.