[CSS] grid 정리

🗒 반응형 웹사이트 제작에 유용한 flex와 grid 중 grid에 대해 간단하게 정리해보겠습니다!

📌 grid란 ?

: flexible box는 아이템을 배치할 때 가로/세로 둘 중 하나를 주축으로 정해놓고 배치하지만, grid는 가로와 세로를 모두 사용한다. (flex: 1차원, gird: 2차원)

display: grid; /*컨테이너의 width는 100%가 된다.*/
display: inline-grid; /*컨테이너 내부의 콘텐츠 넓이만큼 컨테이너의 넓이가 된다.*/

---

📌 grid 배치 명령어 정리

grid-template-columns: 1fr 1fr 1fr; /*그리드컨테이너 안의 항목을 몇개의 칼럼으로 배치할지, 각 칼럼의 너비를 얼마로 할지 지정한다.*/
grid-template-rows: repeat(3, 1fr); /*축약형| 그리드컨테이너 안의 각 항목의 높이를 지정한다.*/

: px단위를 사용하면 고정되기 때문에 fr(Fraction)단위를 사용해 상대적인 크기를 지정하여 반응형웹에 적용할 수 있도록 한다!

---

• 줄의 높이를 지정할 때 최소값과 최대값을 지정한다

grid-template-rows: minmax(100px auto); /*지정한 높이에 넘치는 것을 방지하기 위해 사용하는 함수*/

---

• 간격 조정

grid-column-gap: 20px; /*칼럼과 칼럼사이의 간격*/
grid-row-gap: 10px; /*줄과 줄사이의 간격*/
grid-gap:20px 10px; /*칼럼과 줄 사이의 간격을 한꺼번에 지정*/

---

• 시작 | 끝 번호 지정

grid-column-start: 2; /*칼럼 시작번호*/
grid-column-end: 3; /*칼럼 끝번호*/
grid-column: 2/3; /*칼럽시작/끝번호*/

grid-row-start: 2; /*줄 시작번호*/
grid-row-end: 3; /*줄 끝번호*/
grid-row: 2/3; /*줄 시작/끝 번호*/

---

• 합치기

grid-column: span 2; /* 세로로 2칸 합치기 */
grid-row: span 2;  /* 가로로 2칸 합치기 */
/* grid-area: span 2 / span 2; -> 축약형 */

---

📚 Reference

: 국비지원 수업