📝CSS의 Grid 이해하기

이번 글을 작성하는 이유는 CSS를 배우면서 Grid 속성을 자주 까먹고 있어서, 내가 공부하면서 보기 편하게 정리해두려고 합니다. 모든 공부 완료 후 좀 더 CSS에 대해서 이해하게 된다면 좀 더 자세히 내용을 보완하려고 합니다. 아직 많이 부족하여 내용이 틀리거나 다를 수도 있습니다.

❓Grid

✅︎ display: grid 속성

• grid-template-columns: 열의 크기를 지정합니다. 픽셀, 퍼센트, fr 등 다양한 단위 사용 가능합니다.

• grid-template-rows: 행의 크기를 지정합니다. 열과 마찬가지로 다양한 단위 사용 가능합니다.

• grid-template-areas: 그리드 영역의 이름을 지정합니다. 영역 이름을 문자열로 나열하면 됩니다.

• grid-gap: 행과 열 사이의 간격을 지정합니다.

• grid-column-gap: 열 사이의 간격을 지정합니다.

• grid-row-gap: 행 사이의 간격을 지정합니다.

✅︎ Grid Cell 속성

• grid-column-start: 그리드 셀의 열 시작 위치를 지정합니다.

• grid-column-end: 그리드 셀의 열 끝 위치를 지정합니다.

• grid-row-start: 그리드 셀의 행 시작 위치를 지정합니다.

• grid-row-end: 그리드 셀의 행 끝 위치를 지정합니다.

• grid-area: 위 4개 속성을 한 번에 지정할 수 있습니다. "grid-row-start / grid-column-start / grid-row-end / grid-column-end" 형식으로 입력합니다.