CSS Grid

[ CSS 그리드의 특징 ]

 

CSS 그리드는 부트스트랩이나 여타 다른 CSS 와는 다르게, 마크업의 위치나 클래스 이름이 크게 중요하지 않습니다.

 

웹 페이지 하나를 하나의 큰 격자들의 모음으로 보고, 그 격자에 어떤 태그가 어느정도를 차지할지를 결정하는 식으로 레이아웃이 결정되지요. 그리고 이를 화면 크기에 따라 재정렬하고 크기를 조절할 수 있는 유연성을 가지고 있습니다.

이 격자들은 위의 그림에서는 8 x 8 이지만 사실 이는 사용자가 맘대로 정할 수 있습니다. 2 x 2 가 되던, 12 x 12 가 되던 상관 없습니다. 게다가 각각의 column 과 row 는 모두 동일한 너비와 높이로 이루어져 있어야 할 필요가 없으며, 이용자가 마음대로 이를 지정할 수 있습니다.

 

 

[ CSS 그리드 적용 방법 ]

 

관행적으로, Grid로 지정할 div 요소의 id로 content라는 이름을 부여합니다.

이 content 의 css 속성으로 display: grid; 를 부여하면 해당 div는 Grid로 동작합니다.

 

<컬럼>

이제 해당 grid가 몇 개의 컬럼들로 구성될지를 설정해주도록 합니다.

이때는 grid-template-columns: % % %... 의 형식으로 총 몇개의 칼럼이 몇 %의 비율로 너비를 차지할지를 결정할 수 있습니다.

 

ex) grid-template-columns: 33.3% 33.3% 33.3% <- 3개의 컬럼이 각각 33.3% 의 너비로 그리드에 부여됩니다. 이제 이 그리드 안의 요소들은 이에 맞춰서 알아서 배열됩니다. 혹은 fraction을 부여하여 설정할 수도 있습니다.

 

ex) grid-template-columns: 1fr 1fr 1fr; <- 총 3개의 프랙션이 똑같은 너비로 컬럼으로 설정됩니다. 프랙션 앞의 숫자는 비율입니다. 1fr 2fr 1fr 로 해서 2번째 컬럼의 너비가 다른 컬럼보다 2배가 되도록 설정할 수 있습니다. 이는 사실 repeat(3, 1fr) <- 3개의 1fr을 나열로 줄여쓸 수도 있습니다. (repeat(3, 25%) 도 가능)

 

 

<로우>

칼럼에 대한 설정만 넣어도 괜찮을지 모르지만, row를 설정해주지 않으면 칼럼 요소들 중 하나의 크기가 너무 크면, 그 크기에 맞춰 같은 row의 모든 칼럼들의 너비가 늘어나는 단점이 있습니다. 이럴 땐 grid-auto-rows: ~~px; 로 row의 높이를 강제할 수 있습니다.

 

하지만 이렇게 하면 안에 있던 내용이 크기가 줄어들거나 하지 않고 잘립니다. 이는 문제를 더 심각하게 만드는 것이기 때문에 grid-auto-rows 속성의 값으로 minmax(최소값, 최대값) 을 부여해주도록 합니다.

 

ex) grid-auto-rows: minmax(200px, auto) <- 최소 높이는 200px로 하되, 최대 높이는 안에 있는 컨텐츠의 크기에 맞춰 늘어날 것.

 

이렇게만 할 것이 아니라, 아예 rows에 대한 설정을 columns 와 같이 할 수 있습니다. grid-template-rows: 200px 400px 500px 100px; 이렇게 하면 총 4개의 row 가 각각의 높이를 가진채로 반복되도록 설정됩니다. 참고로, fr도, repeat() 기능도 columns 와 마찬가지로 적용할 수 있습니다.

 

auto 기능을 섞어서 grid-template-rows: repeat(3, minmax(200px, auto)); 를 적용시키는 것 또한 좋은 방법입니다. 하지만 사실 대부분의 경우, 반복되는 row의 개수를 정해야 할 필요는 없습니다.

 

 

<마진>

그리드를 이용하면 마진 또한 좀 더 스마트하게 적용할 수 있습니다.

 

ex) grid-column-gap: 10px; <- 컬럼 사이에 10px의 마진을 넣음. 

 

중요한 것은 컬럼 아이템들 사이에만 마진이 들어가고 나머지에는 들어가지 않게 된다는 것입니다. row도 마찬가지로 적용할 수 있습니다. row, column 할 것 없이 모두 적용하고 싶다면 그냥 grid-gap: 10px; 이렇게만 설정해주면 됩니다.

 

 

 

<중첩 그리드>

그리드 안에 그리드를 넣는 법은 간단합니다. 그냥 그리드 div 안에 또 다른 div를 넣고 해당 div의 클래스 속성에 똑같이 display: grid;를 부여해주기만 하면 됩니다.

 

 

 

<중첩 그리드 확장시키기>

grid-column: span 3; <- 원래의 3배로 해당 컬럼의 크기 증가

grid-column: 1 / 4 <- 칼럼라인 첫번째부터 컬럼라인 4번째까지 크기 증가

로우도 마찬가지로 적용됩니다.

 

 

 

<그리드 정렬 및 조정>

요소들의 순서들과 전혀 관계 없이 각각의 요소들이 위치할 곳을 미리 정하기 위해서는 어떻게 해야할까요? 클래스 속성 값으로 align-items: , justify-items:  속성을 추가시켜 주면 됩니다.

 

모든 아이템들에게 일률적으로 적용할 때는 wrapper 그리드 클래스 속성으로

 

align-items: start <- 수직으로 아이템들을 높이 확장없이 윗 베이스라인 시작점에 맞춤

align-items: end  <- 수직으로 아이템들을 높이 확장없이 아랫 베이스라인 시작점에 맞춤

align-items: stretch  <- 수직으로 아이템들을 높이 확장과 함께 맞춤 (기본값)

justify-items: start <-  수평으로 아이템들을 너비 확장없이 왼쪽 베이스라인 시작점에 맞춤

justify-items: end <-  수평으로 아이템들을 너비 확장없이 오른쪽 베이스라인 끝점에 맞춤

justify-items: stretch  <-  수평으로 아이템들을 너비 확장과 함께 맞춤(기본값)

 

개별 아이템에만 적용할 때는 그리드 안에 있는 요소의 클래스 속성으로

 

align-self: ~~~ justify-self: ~~~ 를 적용해주면 됩니다.

 

하지만 전체적인 틀을 정하고 그 틀의 어느 부분에 무엇이 들어갈지를 정할 수도 있습니다.

grid-template-columns와 grid-template-rows 로 전체적인 칼럼과 로우 개수를 정하고(로우는 사실 안 정해도 됩니다. 생략하면 자동으로 row가 정해집니다.), 그리드 안의 요소들의 클래스 속성 값으로 grid-column: 4 / 13 or grid-row: 1 / 13 이런 식으로 그리드의 어느 부분에 얼만큼 들어찰지를 정할 수 있습니다. 이렇게 자리 값을 정해준 것들이 자리를 차지하기 위해서 자리 값이 정해지지 않은 요소들은 뒤로 밀려나게 됩니다.

 

<그리드 영역 지정>

그리드의 요소의 배정은 그리드 영역을 설정하고 이를 래퍼 그리드의 속성을 고치면서 할 수 있습니다.

그리드 영역으로 지정하고 싶은 요소의 클래스 속성 값으로 'grid-area: 그리드 이름' 의 형식으로 그리드 영역을 지정할 수 있습니다. 이 그리드 영역 이름을 이용해서 그리드 요소들을 배정하게 될 것입니다. 방법은 간단합니다.

grid-template-areas: 속성을 넣고 배정되는 방식을 문자열을 통해 정합니다. 공백을 넣고 싶다면 . 을 채워 넣으면 됩니다.

 

! 주의 : 요소를 따로따로 배정하거나 오타가 있거나 어딘가 배정이 잘못된 부분이 있다면 디자인이 깨질 것입니다. 세미콜론을 넣는 것도 중요합니다!

 

<반응형 그리드>

데스크탑, 모바일 별로 다른 레이아웃이 나타나도록 만들고 싶다면, 당연하지만 미디어 쿼리를 써야합니다.