CSS Grid : Grid-template-columns, Grid-template-rows, Grid-template, Fraction 속성

Grid 격자에 대해 공부해 보도록 하겠습니다. 쉽게 표현하자면 하나의 큰 영역(container)안에 바둑판같은 격자(box)를 형성한다고 보면 되겠습니다. 우선 순위는 행 기준인데 행과 열을 지정함으로써 격자가 생기겠지요. 

 

즉 container가 상위 영역이고 box가 하위 영역이어야하고 상위 영역을 Parent, 하위 영역을 Children이라고 영문은 되 있더라구요. 

 

Flexbox 처럼 display속성에 grid를 주면 상위 영역안으로 하위 영역이 배치가 되는 구조라고 보시면 됩니다. 

 

다음 HTML과 CSS 그리고 이에 따른 브라우저의 모양을 기준으로 설명 드리겠습니다. (기준은 Codecademy가 메인이고 추가 여러 소스에서 공부하고 같이 내용을 담도록 하겠습니다. )

 

Grid 이해를 위한 HTML

 

Grid 이해를 위한 CSS

 

 

 

위 예제에서 상위 영역인 grid에 속성값을 다음과 같이 주겠습니다. 

 

 

그러면 브라우저는 5개 격자가 꽉차게 배치됩니다. 

 

 

이제부터 Grid의 여러 속성을 보면서 브라우저의 변화를 같이 보도록 하겠습니다. 

 

---

 

▒ grid-template-columns 속성

 

Column과 Row의 개념이 혼동될 수 있습니다. 일단 Column은 위에서 세로로 자르는 개념이라고 보시면 됩니다. 예를 들어 1개의 Column을 3개의 Column으로 나눈다하면 세로로 아래로 3등분 되어 결국 가로넓이를 3개의 영역으로 세로로 나누게 되는 것을 말합니다. (이 개념을 손으로 직접 하공에다 자르면서 연습하세요. 효과 있습니다.)

 

예를 들겠습니다. 

 

 

상기 예는 넓이가 500px인 container영역을 box가 100px과 200px로 나눕니다. 

 

 

상기 예는 넓이가 1000px인 container 영역을 20%와 50% 2개의 영역으로 나눕니다. 즉, 200px과 500px로 할당됩니다. 

 

 

상기 예는 넓이가 100px인 container의 영역을 box가 20px, 40%(40px), 60px로 나누는데 총 합이 120px인 관계로 container 영역 밖으로 일부가 넘쳐나갑니다. 

 

최초 연습한 예제를 기준으로 실제 예를 들어 보도록 하겠습니다. 

 

 

상기 예제는 총 넓이가 400px입니다 그런데 수직으로 3개의 영역으로 나누는데 100px, 50%(200px), 200px 총합 500px로 나누게 됩니다. container의 영역이 넘어가겠죠? 그리고 그 밑으로 나머지 box들이 나열됩니다. 

 

다음과 같습니다. .

 

 

---

 

▒ grid-template-rows 속성

 

이제는 가로로 분할해 보겠습니다. 영어는 Row를 생각하시면 됩니다. 상기 예제에서 높이가 500px이므로 200px과 300px로 할당해 보겠습니다. 

 

 

브라우저는 다음과 같이 변하겠죠.

 

 

---

 

▒ grid-template 속성

 

이전에 grid-template-columns와 grid-template-rows를 연습했는데 CSS뿐 아니라 최근 모든 프로그래밍 언어의 기본은 단순화입니다. 상기 예제를 다음과 같이 나타낼 수 있습니다. 

 

※ 여기서 주의할 점은 Row를 먼저 쓰고 Column을 두번째 씁니다. 

 

 

브라우저의 결과값은 같습니다. 

 

---

 

▒ Fraction

 

 

Fraction은 한글로 '일부, 나누기' 이런 뜻이 있습니다. CSS에서는 Grid를 나누는 단위로 사용이 됩니다. 이전 예처럼 container 영역을 넘는 box item들을 Fraction을 통해서 분배를 해 줄 수 있는데요. 

 

다음 예를 같이 보겠습니다. 단위는 fr로 나타냅니다. 

 

 

grid-template 앞에는 가로로 나누고(rows) 뒤에는 세로로 나누는 것(columns)은 이미 연습을 통해 알고 있습니다. 위 예처럼 가로를 2fr 1fr 1fr로 나눈다는 것은 높이 400px을 나누겠죠. 따라서 200px, 100px, 100px을 할당할 겁니다. 

그럼 세로로는 1000px이니 200px, 600px, 200px이 될것 같습니다. 

 

최초 예를 가지고 증명해 보겠습니다. 

 

 

다음과 같이 브라우저에 표시되겠죠.

 

 

참고로 위 grid-template 속성값을 다음과 같이 나타내도 결과는 똑같습니다. 

 

 

Fraction의 또 다른 속성은 상위 영역인 container 밖으로 box item들이 배치가 되지 않습니다. 예를 들어 바로 위 1fr 100px 2fr은 400px로 수직으로 나누고 있는데 속성값을 1fr 200px 2fr로 주게되면 어떤 변화가 일어날까요?

 

=> 200px은 고정이 되고 나머지 200px을 오른쪽은 2배, 왼쪽은 오른쪽의 1배로 배치가 됩니다. 다음 그림처럼요.

 

 

이제 다음시간에는 Grid의 다른 속성을 좀 더 공부해 보겠습니다.