왜 grid를 이제야?
원티드 프리온보딩 챌린지 사전과제를 하던 중, 그리드를 써야겠다는 생각이 물씬 들었다.
그동안은 flex, position만으로 잘 하긴 했는데,(이번에도 그것만으로 할 수 있을거 같긴 했으나)
그리드가 제일 좋은방법이 될 수 있을 것 같았달까?
최근 혼자 진행한 프로젝트에서 카드 레이아웃 잡는데 그리드를 잘 썻기 때문에 잘 할수 있을 것 같기도 했다...(착각이었다)
지금은 머 자유자제로 쓰지만 처음 flex를 접했을때 정말 어려웠다.
부모 요소에서 자식요소의 레이아웃을 컨트롤한다는 것에 익숙지 않기도 했고.
그리드도 그와 비슷하게 부모요소에서 자식요소 레이아웃을 컨트롤 하는데,
그래서 플렉스랑 비슷하게 하면 되겠거니 했다. 비슷한 점도 많지.
근데,, 확실히 다른 것 같다.
일단 개발자도구로 도움을 받는 데 한계가 있더라.
내가 이해를 아직 확실히 못해서 그런지 모르겠지만...
grid game
flex 공부할때 게임 한번 하고 마스터했었는데 그리드에도 똑같은 겜이 있더라.
grid-template-[column | rows]
가로축, 세로축에 몇개의 아이템을 둘 것인지, 그리고 그 각 아이템의 비율은 어떻게 설정할 것인지를 정한다.
아래에서는 20%의 비율으로 5*5개의 아이템을 갖게된다.
.container {
display: flex;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}repeat
위와 같은 결과가 나온다. repeat을 사용해서 n번 n%의 비율(혹은 px, rem, fr)로 공간을 나눈다.
.container {
display: flex;
grid-template-columns: repeat(5, 20%);
grid-template-rows: 20% 20% 20% 20% 20%;
}
/* 이딴식도 가능 */
grid-template-columns: 100px 3em 40%;fr
한 줄의 공간을 nfr로 나누어 갖는다.
아래와 같은 경우, 공간을 6등분해서 2개의 아이템이 1/6, 5/6을 갖는다.
grid-template-columns: 1fr 5fr;
- 50px을 가진 2개의 열(column)이 좌우 각 끝에 있고, 나머지 공간을 차지하는 3개의 열(column)이 사이에 있을 때.
grid-template-columns: 50px repeat(3, 1fr) 50px;
- 레이아웃에 필요하지 않은 행을 0으로 설정하여 렌더링을 방지하거나 숨길 수 있다.
grid-template-columns: 50px 0 0 0;grid-template
grid-template-columns, grid-template-rows를 합친 것.
grid-template: row / col; 형식1 [o|v|v|v|v] 2 [o|v|v|v|v] 3 [o|v|v|v|v] 4 [o|v|v|v|v] 5 [o|v|v|v|v] 6 grid-template: 1fr / 1fr 4fr; /* 각각 50% 인 두개의 행(row)과 200px 너비의 한개의 열(column)의 그리드 */ grid-template: 50% 50% / 200px;
column
grid-column-[start | end]
몇번째의 세로축에서 시작(끝)이 나도록 할지 정한다.
1. 시작점과 끝점을 정한다.
이때 아래 두 코드는 같은 결과를 나타낸다.
꼭 start < end 여야 하는 것은 아니다.
1. 2. 3. 4. 5. 6.
[ v | v | v | | ]
.water1 {
grid-column-start: 1;
grid-column-end:4;
}
.water2 {
grid-column-start: 5;
grid-column-end: 2;2. 음수도 가능.
1. 2. 3. 4. 5. 6.
[ | | | v | ]
grid-column-start: 4;
grid-column-start: -3; 위와 같은 결과. 음수도 쌉가능3. span을 이용해 너비를 설정하기도 한다.
1. 2. 3. 4. 5. 6.
[ v | v | v | v | v ]
grid-column-start: 1;
grid-column-end: span 5;grid-[column | row]
grid-column-start와 grid-column-end를 합친 것.
1. 2. 3. 4. 5. 6.
[ | v | v | v | ]
grid-column: 2 / 5;
grid-column: 2 / span 3;row
grid-row-[start | end]
몇번째의 줄(가로축)에서 시작(끝)이 나도록 할지 정한다.
row
1 [ | | | | ]
2 [ | | | | ]
3 [ v | | | | ]
4 [ v | | | | ]
5 [ v | | | | ]
6
grid-row: 3 / 6;
grid-row: 3 / span 3;row
1 [ |v|v|v|v]
2 [ |v|v|v|v]
3 [ |v|v|v|v]
4 [ |v|v|v|v]
5 [ |v|v|v|v]
6
grid-column: 2 / span 4;
grid-row: 1 / span 5;grid-area
grid-area은 /(슬래쉬)로 구분지어서 grid-row-start, grid-column-start, grid-row-end, grid-column-end 차례로 작성 가능하다.
1 [ |v|v|v|v]
2 [ |v|v|v|v]
3 [ |v|v|v|v]
4 [ | | | | ]
5 [ | | | | ]
6
grid-area: 1 / 2 / 4 / 6;
/* 아래와 같다. */
grid-row: 1 / 4;
grid-column: 2 / 6;겹치게 사용하는 것도 가능하다.
1 [ | |v| | ]
2 [ |v|v|v| ]
3 [ |v|v|v| ]
4 [ |v|v|v| ]
5 [ | |v| | ]
6
.water-1 {
grid-area: 1 / 4 / 6 / 5;
}
.water-2 {
grid-area: 2 / 3 / 5 / 6;
}order
그리드 요소들에 grid-area, grid-column, grid-row등이 적용되지 않았을 경우 html에 기재된 순서대로 정렬된다.
이때 order를 사용해서 item의 순서를 제어 가능하다!
order의 디폴트값은 0이다. 음수사용 가능
실습하기: 아직 어렵다.
그리드를 제대로 공부하지 않고 중첩적으로 적용하느라고 사전과제 대차게 말아먹었는데, 차근차근 큰 덩어리부터 진행을 다시 해봐야겠다!!
