HTML/CSS (5)
CSS
grid 진짜 끝장낸다
자식요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정한다.
flex는 1차원 레이아웃이지만 grid는 2차원 레이아웃 시스템이다.
| 명칭 | 설명 |
|---|---|
| 그리드 컨테이너 | 그리드의 가장 바깥(테두리) 영역 |
| 그리드 셀 | 그리드의 한 칸 |
| 그리드 아이템 | 그리드 컨테이너의 자식 요소들 |
| 그리드 트랙 | 그래드의 행 또는 열 |
| 그리드 라인 | 그리드 셀을 구분하는 선 |
| 그리드 넘버 | 그리드 라인의 각 번호 |
| 그리드 갭 | 그리드 셀 사이의 간격 |
| 그리그 에어리어 | 그리드 셀의 집합 |
그림 자료 출처 : 위니브 프론트엔드 스쿨
✔️ 부모 요소 : grid-container 속성
grid-template-columns : 열방향 그리드 트랙의 사이즈 설정
grid-template-row : 행방향 그리드 트랙의 사이즈 설정
📍 fr 단위
분수 단위를 의미하며 컨테이너를 분할해준다.
grid 컨테이너 안에서 트랙의 비율을 지정해주는 유연한 길이 단위이다.
⚠️ fr 단위를 사용시 grid-item에 말줄임을 위한 속성을 사용하게 되면 fr 단위의 유연함 때문에 높이와 너비가 깨질 수 있다.
➕ 사용되는 함수
repeat(반복 횟수, 반복 값)
minmax(최소/최대 사이의 범위 설정)
auto-fill : 가능한 많은 셀들을 만들기 위해 빈공간이 생기기도 한다.
auto-fit : 그리드 컨테이너 내부에 공간이 남을 경우, 그 공간들을 각 셀들이 나눠 가진다.
👉 이 두 속성은 repeat 함수를 사용할 때, 반복되는 수를 고정하지 않고 넓이에 따라 가능한 많은 그리드 열을 배치하게 한다.
👉 auto-fill/fit은 열이 몇 개까지 쌓일지 모르기 때문에 grid-template-rows는 따로 지정하지 않고 item 구역에 height를 주어 고정시킨다.
gap : 셀과 셀 사이의 간격을 설정할 때 사용하는 속성이다.
grid-template-areas : 그리드 영역을 정의하는 동시에 각 영역의 이름을 붙여준다.
📍 추가 지식
그리드 안에서 텍스트 정렬은 grid-item 안에서 flex를 다시 사용하거나 grid-container 에서align-items: (center);+justify-items: (center);를 주면 된다.
✔️ 자식 요소 : grid-item 속성
grid-column-start, grid-column-end, grid-row-start, grid-row-end
→ 행 단축 : grid-row: 시작 / 끝;
→ 열 단축 : grid-column: 시작 / 끝
→ 모든 속성 단축 : grid-area: 행 시작 / 열 시작 / 행 끝 / 열 끝
⚠️ 시작 값과 끝 값을 같은 값으로 줘버리면 오류나서 적용이 안된다!!!
⚠️ 끝 값은 항상 시작 값보다 크게 주기!!!!
📍 span
행과 열을 병합하기 위한 키워드이다.
span은 한 셀을 의미하기 때문에 그리드 라인 번호로 쓰지않고 n번째 칸 부터/까지 라고 해석된다.
grid-area: 1/1/1/span 3;
grid-area : grid-template-areas에서 붙인 이름을 사용하기 위해 적는 속성이다.
이거 진짜 너무 안풀려서 너무 고민했었는데 열 3개라는 말에 꽂혀서 하나 간과한게 있었다.
밑에 grid-area: 1 / 1 / 6 / 2; 보면 그리드 라인이 6까지 되어있는데 열을 3개로 하면 그리드 라인이 4까지 밖에 안나와서 사이즈는 맞아도 문제는 해결이 안되는 것이였다😭
이렇게 쓰면 제대로 되어서 넘어간다 후하,,,,
이건 대체 뭔데 5행인데 왜 4개만 쓴 것이고 0 단위는 또 뭐고,,,
결국 멘토님께 여쭤봤다 ㅎ
현재 행이 5개인데 4개를 지정하시면 마지막은 전체를 차지하게 돼요!
그러니까 현재 쓰신 답이 grid-template-rows: 50px 0 0 0 1fr; 과 동일하게 적용이 된겁니다! 따라서 땅으로 있어야 하는 50px(1행), 물로 채워진 칸(5행)만 남겨두기 위해서 나머지행(2~4행)을 0으로 설정하신 겁니다!
0이 자기 칸을 그대로 가지고 있다는게 헷갈렸는데 멘토님이 다시 설명해주셨당
근데 현재 가장 위의 50px은 물이 가면 안되니까 50px을 고정으로 주고
5번째 행이 가득차야되니까 2~3행을 없애려고 높이를 0으로 주는거에요!
이미 물로 지정되있는 부분이고, 이 부분의 높이를 키우는 거라고 생각하시면 될 것 같아요
그저 저 라인때문에 사이즈가 0이 된 것이 표현되지 않아서 헷갈렸던 것 ㅠㅠㅠ
어찌저찌 끝~...
