Grid 란?
Grid(그리드)는 웹 페이지의 레이아웃을 효과적으로 구성하기 위한 CSS 기술로, 행과 열의 구조를 사용하여 유연하고 복잡한 레이아웃을 설계할 때 도움을 주는 도구입니다.
주요 용어
- Track (트랙): 행 또는 열을 나타냅니다.
- Line (선): 일반적으로 거터(Gutter)로 알려진 트랙과 트랙 사이의 간격을 의미합니다.
- Cell (셀): 아이템이 배치되는 최소 단위의 영역을 나타냅니다.
- Area (영역): 하나 이상의 셀로 이루어진 아이템 배치 공간입니다.
많은 내용을 다루기 때문에, grid container 속성과 grid item 속성을 두 개의 글로 나누어 정리하려고 합니다.
오늘은 grid container 속성에 대해 자세히 살펴보겠습니다.
📌 Grid Container Properties
💡template은 명시적 / auto는 암시적
✏️ display
- 그리드 컨테이너를 정의합니다.
grid: 블록 특성inline-grid: 인라인 특성
✏️ grid-template-rows
- 명시적인 행의 개수(크기)를 정의합니다.
repeat함수로 반복을 적용할 수 있습니다.- fraction(비율) 단위로 비율을 설정할 수 있습니다.
- 라인의 이름을 정의할 수 있습니다.
.container { grid-template-rows: repeat(2, 100px) [row1-start] 1fr; }
✏️ grid-template-columns
- 명시적인 열의 개수(크기)를 정의합니다.
fr(fraction, 공간 비율) 단위를 사용할 수 있습니다.repeat함수로 반복을 적용할 수 있습니다.
.container { grid-template-columns: 1fr 2fr repeat(3, 100px); }
✏️ grid-template-areas
- 지정된 그리드 영역 이름을 참조하여 그리드 템플릿을 생성합니다.
- grid-Items에 적용됩니다.
.container {
display: grid;
grid-template-rows: repeat(2, 80px);
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"top-left top-right"
"bottom-left bottom-right";
}
header {grid-area: top-left;}
main {grid-area: top-right;}
footer {grid-area: bottom-left;}
aside {grid-area: bottom-right;}아이템들을 각각 명시된 그리드 영역에 배치합니다. 이는 코드를 이해하기 쉽게 만들어주고, 그리드 레이아웃을 관리하기 용이하게 합니다.
✏️ gap (grid-gap) - 단축 속성
row-gap,column-gap의 단축 속성으로 사용됩니다.- 행과 열의 간격을 한 번에 설정할 수 있습니다.
- 개별 속성
row-gap,column-gap을 각각 사용할 수도 있습니다.
e.g., row-gap: 15px;
예시:
.container {
display: grid;
gap: 10px 20px; /* row-gap이 10px, column-gap이 20px인 효과 */
}✏️ grid-auto-rows / grid-auto-columns
- 암시적 행 / 열의 크기를 정의합니다. (
auto) - 명시적으로 지정되지 않은 행 / 열에 적용됩니다.
예시:
.container {
display: grid;
grid-auto-rows: 50px; /* 암시적 행의 너비가 50px로 설정됨 */
}✏️ grid-auto-flow
- 배치하지 않은 아이템을 어떤 방식의 '자동 정렬 알고리즘'으로 처리할지 정의합니다.
- 기본값은
row(행 방향)입니다. row,column,dense등의 값을 가질 수 있습니다.
💡 row/column dense: 그리드 아이템이 행/열 우선으로 자동 배치되며, 빈 공간이 있을 경우, 다른 그리드 아이템이 빈 공간을 채우려고 시도합니다.
예시:
.container {
display: grid;
grid-auto-flow: column; /* 아이템을 열 방향으로 자동 배치 */
}.container {
display: grid;
grid-auto-flow: dense; /* 빈 공간을 채우기 위해 아이템을 조밀하게 배치 */
}✏️ grid-row
grid-row는 그리드 아이템이 차지할 행의 범위를 지정합니다.
💡 행 번호는 위에서 아래로 증가하며, 음수를 사용하면 아래에서 위로 참조할 수 있습니다.
간단한 예시:
.item {
grid-row: 2 / 4; /* 2행에서 4행까지 차지함 */
grid-row: 1 / -1; /* 1행에서 마지막 행까지 차지함 */
grid-row: span 2; /* 현재 위치에서 2행 차지함 */
}✏️ grid-column:
grid-column은 그리드 아이템이 차지할 열의 범위를 지정합니다.
💡 열 번호는 왼쪽에서 오른쪽으로 증가하며, 음수를 사용하면 오른쪽에서 왼쪽으로 참조할 수 있습니다.
간단한 예시:
.item {
grid-column: 2 / 4; /* 2열에서 4열까지 차지함 */
grid-column: 1 / -1; /* 1열에서 마지막 열까지 차지함 */
grid-column: span 2; /* 현재 위치에서 2열 차지함 */
}✏️ grid-area
grid-area 는 그리드 아이템이 차지할 영역을 한 번에 지정합니다.
.item {
grid-area: row-start / column-start / row-end / column-end;
}예시:
.item {
grid-area: 1 / 2 / 3 / 4; /* 아이템이 1행 2열에서 3행 4열까지 차지함 */
}💡 grid container 속성 중에는 flex container 속성과 유사한 부분들이 있어, 이에 대해서는 별도로 정리하지 않겠습니다.
내용이 많아, grid item properties 에 대한 내용은 다음 블로그 포스트에서 자세히 다루도록 하겠습니다.
