[CSS] grid-garden으로 재밌게 공부하는 grid

flex를 처음 배울 때 flex froggy라는 https://flexboxfroggy.com/ 사이트에서 이것저것 flex를 가지고 놀았었는데 , grid도 grid-garden (https://cssgridgarden.com/) 이라는 비슷한 사이트가 있길래 여기서 grid를 가지고 놀아봤습니다.

Flexbox Froggy

Grid Garden

flex도 container를 위한 속성과 item을 위한 속성으로 나뉘는데,
container 속성 : display, flex-direction, flex-wrap, gap, justify-content, align-itmes, align-content
item 속성 : align-self, order, flex-grow, flex-shrink, flex-basis

grid도 비슷하게 요소들을 감싸고 있는 template을 위한 속성과 그 하위를 담당하는 item에 대한 속성으로 크게 나뉩니다.
template 속성 : grid-template(grid-template-columns/ grid-template-rows)
item 속성: grid-column(grid-column-start/ grid-column-end), grid-row(grid-row-start/grid-row-end), grid-area, order

총 lv.28까지 중에 1~19는 item에 대한 속성, 20~28은 template에 대한 속성을 다룹니다.

같이 레벨 1부터 grid-garden을 풀어보도록합쉬다

---

template 하위 아이템 (grid-column/grid-row)에 대한 속성

grid-column-start: 3;와 같이 입력시 그리드 세번째 세로선에서 시작되는 영역에 물을 불어 넣고 있습니다. 이는 그리드의 왼쪽에서 세번째 열(column) 항목을 뜻합니다.

lv.1은 grid-column-start를 이용해 물을 당근이 있는 좌표(1,3)에 위치시켜야 합니다.
grid-column-start는 해당 아이템이 몇번째 column부터 시작할 지 나타내는 속성입니다.
당근이 3번째 column에 있으니 grid-column-start:3 해주면 성공

잡초는 5번째 column에 있으니 grid-colum-start:5를 해줍니다

 

grid-column-start이 단독으로 사용될때는, 한개의 그리드 열(column)을 나타냅니다. 하지만, grid-column-end 속성을 같이 사용하면 여러 열(column)에 걸쳐 확장이 가능합니다.

한 포인트만이 아니라 여러 좌표에 넓게 위치할 수도 있습니다.
grid-column-start / grid-column-end를 사용하면 몇번째 컬럼부터 몇번째 컬럼까지 넓게 영역을 잡을 수 있습니다.
다만 grid-column-end:4를 하면 4 직전인 세번째 컬럼까지만 영역을 차지하니 주의해주세요

 

grid-column-start 와 grid-column-end를 같이 사용할때, 시작 값보다 마지막 값이 더 커야한다고 생각하실 수 있습니다. 하지만 꼭 그렇지만 않습니다!

무조건 왼쪽에서 오른쪽으로 방향이 향하는 것은 아니라 grid-column-start와 grid-column-end는 바뀔 수 있습니다.
2번째부터 5번째 컬럼 직전까지 영역을 잡아야하니 grid-column-start:5; grid-column-end:2; 도 가능한 것이죠,

 

그리드 왼쪽의 기준이 아닌 오른쪽으로 기준을 하고싶다면, grid-column-start 와 grid-column-end를 음수로 설정하시면 됩니다. 예를들어, -1로 오른쪽 첫뻔재 세로선을 지정하실 수 있습니다.

또한 무조건 양수만 가능한 것도 아닙니다.
양수로 잡으면 방향이 오른쪽지만 음수로 할 경우엔 방향이 왼쪽으로 향합니다.
grid-column-start:1인데 음수를 사용해 (1,4)까지 영역을 잡아야 한다면 (문제에서 음수를 사용하라고 했으니까)
grid-column-end:-1을 하면 grid-column-start:5; 와 동일해집니다.

 

마찬가지로 -3번째에서부터 시작해서 (1,4)영역을 잡습니다.

 

그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신, span을 이용하여 열(column)의 넓이를 지정할 수 있습니다. span은 양수만 설정 가능합니다.

grid-column-start:시작좌표, grid-column-end:끝좌표가 아니라 span을 이용해 넓이를 잡아줄 수도 있습니다.
grid-column-start:2;이므로 (1,2)에서 시작해서 grid-column-end:span 2 이므로 grid-column-end:4; 와 동일해집니다.

 

마찬가지로 (1,1)부터 5만큼의 넓이를 차지합니다.

 

만약 grid-column-end의 값이 정해져있다면, grid-column-start에서도 span을 사용하여 넓이를 잡아줄 수 있습니다

 

매번 grid-column-start와 grid-column-end를 입력하는 것은 불편합니다. 다행스럽게, grid-column는 한번에 입력가능한 단축해서 설정으로, /(슬래쉬)로 구분됩니다. 예를 들면, grid-column: 2 / 4;는 그리드 항목을 두번째 수직선에서 네번째 수직선까지로 설정합니다.

여태까지 grid-template-columns , grid-template-rows를 입력하느라 힘들었을 여러분들을 위해
grid-column과 / 를 이용해 한방에 사용할 수 있습니다

---

flexbox와 별개로 CSS 그리드를 설정하면 컬럼과 행 두가지 측면에서 쉽게 그리드 항목을 배치할 수 있습니다. grid-row-start는 grid-column-start 수직선을 제외하곤 동일하게 작동합니다.

grid-column은 좌우로 배치했다면, grid-row를 이용하면 상하로 배치할 수 있습니다.
start와 end는 grid-column과 동일하게 작동합니다

마찬가지로 start와 end 따로 정해주지 않아도 grid-row와 /를 이용해 한방에 정해줄 수 있습니다.

 

grid-row와 grid-column을 동시에 사용해주면 이제 상하좌우 어디든 배치할 수 있습니다.
grid-row:5; grid-column:2;를 이용했으니 (2,5)에 위치하게 됩니다.

 

grid-row: span 5;이므로 5만큼의 영역을 차지에 맨위부터 맨아래까지 차지했고,
grid-column: 2/6 이므로 2번째 column부터 6번째 직전 (5번째) column까지 차지했습니다.

 

grid-column와 grid-row 모두를 입력하는게 너무 많은경우, 다른 속성을 이용하여 줄일 수 있습니다. grid-area은 /(슬래쉬)로 구분지어 grid-row-start, grid-column-start, grid-row-end, grid-column-end순으로 입력 가능합니다.

grid-column과 grid-row를 입력하는것마저 귀찮다면, grid-area를 이용해 한방에 영역을 지정해줄 수 있습니다.
row-start / column-start / row-end / column-end 의 순서입니다.

 

grid-area:2/3/5/6은 2부터 5직전 row까지, 3부터 6직전(5) column까지를 의미합니다
(위는 #water-1에 지정된 grid-area:1/4/6/5 와 #water-2에 지정된 grid-area:2/3/5/6이 합쳐진 모습입니다)

---

 

그리드 요소들이 grid-area, grid-column, grid-row, 기타 등을 사용하지 않고, 표시될 경우 소스코드에 기입된 순서대로 표기됩니다. table 레이아웃에 비해 grid 시스템의 장점인 order 속성을 이용하면 이를 재정의가 가능합니다. 기본적으로, 그리드의 모든 요소들은 order의 값이 0이지만, z-index와 같이 양수와 음수의 값 모두 설정이 가능합니다.

item에 order속성을 줘서 순서를 변경할 수도 있습니다.
flex와 마찬가지로 음수도 가능합니다.

---

template(grid-template)에 대한 속성

동일한 너비의 열(column)들을 지정할려면 불편할 수 있습니다. 다행스럽게도 a repeat 함수가 이 문제를 해결해줍니다. 예를 들면, grid-template-columns: 20% 20% 20% 20% 20%;와 같이 이전에는 설정했었지만, grid-template-columns: repeat(5, 20%);와 같이 설정해도 동일합니다.

grid-template-columns은 백분율 같은 값뿐만 아니라, 픽셀 및 em과 같은 길이 단위도 허용합니다. 또한 서로 다른 단위를 함께 사용할 수도 있습니다.

template은 레이아웃을 잡는데에 사용됩니다.  스페이스바를 이용해서 잡아줘도 되고, repeat(몇번, 크기) 를 이용해 잡아줘도 됩니다. 
크기는 px이든 em이든 %이든 상관 없습니다.

 

또한 Grid는 새로운 단위인 fractional fr를 소개하고 있습니다. 각 fr 단위들은 사용가능한 공간을 하나로 공유하여 할당합니다. 예시로, 두개의 element들을 1fr과 3fr로 설정시, 공간이 4개의 동일한 크기로 공유됩니다. 첫번째 element는 사용가능한 공간의 1/4 크기로 그리고 두번째 element는 3/4 크기를 차지합니다.

만약 정확히 등분으로 나누고 싶다면 fr을 사용할 수 있습니다. grid-template-columns:1fr 5fr을 했으니 각각 1/6 과 5/6만큼을 차지하게됩니다. 

열(column)을 pixel, percentage, 혹은 ems로 설정시, fr로 설정된 다른 열(column)의 남은 공간으로 나뉘어집니다.

물론 px, em, %등 치수들과 같이 사용된다면 그 남은 부분을 fr이 나눠갖게 됩니다. grid-template-columns:75px 3fr 2fr 이라면 총 길이의 75px를 뺀만큼을 각각 3/5, 2/5 해서 나눠갖게 됩니다. 

 

grid-template-rows 또한 grid-template-columns과 동일한 방법으로 레이아웃을 잡아줄 수 있습니다. 

 

grid-template-rows와 grid-template-columns 두개를 각각 입력하기 귀찮다면, grid-template과 /을 통해 한번에 작성할 수 있습니다. grid-template: 50% 40% /200px은 grid-template-rows: 60% 40%; grid-template-columns:200px 과 동일합니다.  

 

grid-template:1fr 50px / 20% 80%은 grid-template-rows: 1fr 50px; grid-template-columns:20% 80%; 과 동일합니다. rows는 50px를 뺀만큼을 1조각으로 나눴고(안나눴단 얘기) columns는 20%와 80%으로 나눠졌습니다. 

 

---

지금까지 grid-garden을 통해 grid 속성들을 알아봤습니다. 혹시 궁금한 점이 있다면 댓글로 남겨주세요!