CSS-3) CSS 기초 정리 3 - Grid
이전까지 설명한 flexbox를 이용하면 item들의 상하, 좌우, 중앙 정렬 등은 쉽게 가능하지만, 격자(grid) 형태의 구성을 하는 건 어렵고, 오래 걸린다. 그런 수고를 덜어주고자 나타난 게 grid다.
[grid]
٠ display : grid;
-> CSS grid layout을 사용하기 위한 시작점.
٠ grid-template-columns : 100px 100px 100px;
-> grid의 column 수를 정하고, 해당 column들의 크기를 할당해 주는 속성이다.
٠ grid-template-rows : 100px 100px 100px;
-> grid에서 선택된 row의 크기를 할당해 주는 속성이다. 만약 선택한 row의 수 보다 실제 row의 수가 많다면, 선택된 row까지만 값을 적용하고 나머지는 default 값이 적용된다.
٠ column-gap : 10px;
-> column들의 간격을 할당해 준다.
٠ row-gap : 10px;
-> row들의 간격을 할당해 준다.
٠ gap : 10px;
-> column과 row의 간격을 한 번에 할당해 준다.
٠ repeat(4, 100px);
-> grid-template-columns: repeat(4, 100px)은 grid column을 4개 만들어서 모두 100px을 적용한다는 말이다. repeat을 응용하면 '100px repeat(2, 200px) 100px' 처럼 같은 4개의 column이지만, 할당을 다르게 줄 수도 있다.
٠ grid-template-area :
위의 코드에 노란색 선으로 표시한 것처럼 각 child 마다 이름을 부여하고, child 값을 넣고 싶은 곳을 grid-template-area에 배치하면 그대로 출력 된다. 하지만 grid 내부에 grid-area의 영역이 나눠지지 않고 전부 이어져 있어야 한다. 또한 영역이 ㄴ자, ㄱ자 처럼 꺾이지 않고 직사각형 형태여야 만들어진다.
٠ auto;
-> 만약 grid-template-rows나 columns를 auto로 설정할 경우, 값을 준 영역을 제외하고 남은 영역이 다 채워진다. 예를 들어, grid-template-columns: auto repeat(2, 100px); 이라고 작성할 경우, auto의 자리에 해당하는 첫 요소가 100px 2칸을 제외하고 남은 칸을 모두 채운다.
grid-column-start: 1;
grid-column-end: 3;
* grid-column: 1 / 3;
** grid-column: 1 / -1;
-> grid-column의 격자 영역 중 첫 번째 줄부터 3번째 줄 사이의 영역을 지정하는 것이다. 즉, 적용하는 child 요소는 첫 번째와 두 번째 칸을 영역으로 갖게 된다. start와 end를 모두 지정해야 영역이 선정된다. 만약 하나라도 지정되지 않는다면, 제대로 된 영역을 갖지 못한다.
** 이건 -1이 맨 마지막 줄까지 라는 의미를 갖고 있다.
grid-row-start: 2;
grid-row-end: 4;
* grid-row: 2 / 4;
-> 위에서 설명한 것과 같은 형식이다. 대신 row로 그 영역이 바뀌었을 뿐이다. * 처럼 표기하는 것이 더 간단하고 편하다.
grid-column: span 4;
grid-row: 2 / span 2;
-> span은 grid 내부 cell의 갯수를 지정할 수 있다. (start point) / span (cell 수)로 나타낼 수 있다. 하지만 동일한 parent 내부의 child 중 start point가 겹치는 child가 있을 경우 밀려날 수도 있기 때문에, 그 child 요소도 span으로 수정을 해줘야 한다.
٠ fr; (fraction = 부분)
-> fr은 grid에서 사용 가능한 공간을 의미한다. 즉, 사용 가능한 최대 범위를 차지하게 된다. 여기서 block은 width와 height의 default가 각각 가능한 최댓값, 0이다. 그렇기에 grid에서 block의 height 값을 지정하지 않으면, grid-container에서 fr을 사용할 수 없다.
-> 사용법 : fr은 grid-container에서 차지하는 비율을 지정하게 된다.
grid-template-columns: 1fr 1fr 1fr 1fr;
이렇게 사용하면 4개의 child가 동일한 비율의 범위를 차지하게 된다.
grid-tmplate-columns: 4fr 1fr 1fr 1fr;
이렇게 사용하면 첫 번째 child가 다른 child들 보다 4배 더 큰 범위를 차지하게 된다.
grid-template-columns: repeat(4, 1fr);
보통은 위처럼 표시하면 된다.
٠ grid-template:
-> 우선 grid-template-area를 사용할 때처럼 각 속성들에 이름을 부여한다.
ex) grid-area : header; grid-area : content; ...
이후 부여한 이름으로 위처럼 설정을 한다. 여기서 grid-template-area와 다른 점은 1번과 2번으로 표시한 부분이다. grid-template는 1번에서 cell이 차지하는 row의 비율을 지정할 수 있고, 2번에서는 cell이 차지하는 column의 비율을 지정할 수 있다. 2번 부분을 repeat으로 처리해 봤지만 동작하지 않는다. grid-template에서는 repeat을 사용할 수 없다.
٠ place-items: (align-items) (justify-items);
-> place-items는 child 요소들의 grid 내부에서의 정렬을 정해주는 속성이다. 처음에 들어가는 값이 align-items이고 두 번째로 들어가는 값이 justify-items다.
٠ grid-auto-rows: 100px;
-> grid-auto-rows는 내가 grid-template-rows로 설정해 둔 row 이상으로 요소가 추가되었을 때, 자동으로 해당 요소들에 정해진 값을 할당해 준다. 즉, grid-template-rows: repeat(4, 100px); 인 경우에 5번째 row부터는 grid-auto-rows의 설정을 따라간다.
٠ grid-auto-columns: 100px;
-> column에 적용되는 것을 제외하고는 위의 설명과 같다.
٠ grid-auto-flow: column;
-> grid-auto-flow: column은 html에서 설정된 child들의 정렬을 세로 기준으로 변경해 주는 속성이다.
ex)
 |
| grid-auto-flow: column; |
 |
| grid-auto-flow:row; = default |
위의 사진처럼 정렬 기준을 변경해준다. flexbox의 flex-direction과 비슷한 역할을 한다고 이해하면 된다.
٠ grid-template-columns: repeat(10, minmax(80px, 1fr));
-> minmax는 말 그대로 최소٠최댓값을 지정해준다. 이를 column에 적용할 경우, 위의 코드의 해석은 "column을 10개 만들고, 그것들의 cell이 최소 80px, 최대 1fr의 크기를 유지하도록 한다." 이다. 만약 80px을 10개 담을 수 있는 것 보다 브라우저의 크기가 작아지면, cell은 80px을 유지하고 스크롤 바가 생긴다.
٠ grid-template-column: repeat(auto-fill, minmax(80px, 1fr));
& grid-template-column: repeat(auto-fit, minmax(80px, 1fr));
-> auto-fill은 브라우저의 크기가 늘어날 경우, 비어있는 새로운 cell들을 추가해서 row를 채운다. auto-fit은 늘어난 만큼 cell들을 stretch 해서 빈 공간(row)을 채운다.
٠ grid-template-column: max-content min-content;
-> max-content는 요소에 들어가 있는 text의 길이에 맞춰서 column의 길이를 최대한 늘려준다. 반대로 min-conten는 column이 가능한 최소한의 길이로 줄어든다.
오늘은 grid에 대해서 알아봤다. 이전에 배웠을 때는 너무 순식간에 넘어갔어서 제대로 이해를 하지 못했었는데, 시간을 들여 정리해 가며 공부하니 머릿속에 남는 게 많은 것 같다. flexbox 연습 게임인 froggy가 있듯이, grid를 연습하기 위한 게임도 있다.
https://codepip.com/games/grid-garden/#ko
위의 게임을 통해서 오늘 공부한 내용을 좀 더 연습해 봐야겠다.
"기록은 기억을 이길 수 없다" 계속 힘내보자!
댓글
댓글 쓰기