그리드

정현승·2024년 10월 18일

CSS

그리드 구성 요소

행(row): 그리드 레이아웃에서 가로줄을 의미합니다.
열(column): 그리드 레이아웃에서 세로줄을 의미합니다.
그리드 셀(grid cell): 행과 열이 만나 이루어지는 하나의 공간을 나타냅니다.
그리드 갭(grid gap): 그리드 셀과 그리드 셀 사이의 간격을 나타냅니다.
그리드 아이템(grid item): 그리드 셀 안에서 표현되는 콘텐츠를 의미합니다.
그리드 라인(grid line): 그리드 행과 열을 그리는 선을 의미합니다.
그리드 넘버(grid number): 그리드 라인에 붙는 번호입니다.
그리드 컨테이너(grid container): 그리드 레이아웃의 전체 내용을 담고 있는 최상위 부모 요소입니다. 그리드와 관련한 내용은 모두 그리드 컨테이너 안에 표현됩니다.

기본 속성

`display` 속성

display 속성은 요소의 레이아웃 방식을 결정하는 기본적인 속성입니다. CSS Grid를 사용하려면 display: grid를 설정하여 해당 요소를 그리드 컨테이너로 만들어야 합니다.

grid: 요소를 그리드 컨테이너로 설정합니다.
inline-grid: 요소를 인라인 그리드 컨테이너로 설정합니다.

.container {
  display: grid;
}

`grid-template-columns` 속성

grid-template-columns 속성은 그리드 컨테이너 내에서 열의 크기와 개수를 정의합니다. 각 열의 너비를 픽셀, 비율(fr), 퍼센트 등 다양한 단위로 지정할 수 있습니다.

none: 열을 설정하지 않음.
고정된 너비 또는 유연한 크기를 지정. 예를 들어 100px 200px은 첫 번째 열은 100px, 두 번째 열은 200px 너비를 가집니다.
repeat(count, width): 열을 반복해서 설정할 수 있습니다.
auto-fit 및 auto-fill: 가능한 만큼의 열을 자동으로 채워줍니다.

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr;
}

위 예제는 3개의 열을 정의하며, 첫 번째 열은 100px, 두 번째는 200px, 세 번째 열은 남은 공간을 채웁니다.

`grid-template-rows` 속성

grid-template-rows 속성은 그리드 컨테이너 내에서 행의 크기와 개수를 정의합니다. 열과 마찬가지로 행의 높이도 픽셀, 비율, 퍼센트 등으로 지정할 수 있습니다.

none: 행을 설정하지 않음.
고정된 높이 또는 유연한 크기를 지정. 예를 들어 100px 200px은 첫 번째 행은 100px, 두 번째 행은 200px 높이를 가집니다.
repeat(): 행을 반복해서 설정할 수 있습니다.

.container {
  display: grid;
  grid-template-rows: 100px auto 50px;
}

`row-gap` 속성

row-gap 속성은 그리드의 행 간격을 설정합니다. 그리드 아이템들 사이의 수직 간격을 지정합니다.

길이 값(px, em, % 등): 행 사이의 간격을 설정합니다.
normal: 기본 간격을 설정합니다.

.container {
  display: grid;
  row-gap: 20px;
}

`column-gap` 속성

column-gap 속성은 그리드의 열 간격을 설정합니다. 그리드 아이템들 사이의 수평 간격을 지정합니다.

길이 값(px, em, % 등): 열 사이의 간격을 설정합니다.
normal: 기본 간격을 설정합니다.

.container {
  display: grid;
  column-gap: 15px;
}

`gap` 속성

gap 속성은 CSS에서 그리드(grid) 또는 플렉스(flex) 레이아웃의 행과 열 사이에 간격을 지정하는 속성입니다. gap은 행 간격과 열 간격을 한꺼번에 설정할 수 있는 단축형 속성으로, CSS Grid와 Flexbox에서 모두 사용 가능합니다. 이 속성은 과거의 grid-gap** 속성을 대체하며, 더 범용적으로 사용됩니다.

gap: <row-gap> <column-gap>;

row-gap: 행(row) 사이의 간격을 설정합니다.
column-gap: 열(column) 사이의 간격을 설정합니다. 생략 시, row-gap과 동일한 값이 적용됩니다.

.container {
  display: grid;
  gap: 20px;
}

속성 값

길이 값: px, em, rem, % 등의 단위로 간격을 설정할 수 있습니다.
- 예: 10px, 1rem, 5%
normal: 기본 간격을 적용합니다. 플렉스 레이아웃에서는 이 값을 사용할 수 없습니다.

정렬 속성

다음은 align-items, align-self, justify-items, justify-self, place-items, place-self 속성에 대한 설명입니다. 이 속성들은 CSS Grid 및 Flexbox에서 아이템의 정렬을 제어하는 속성들입니다.

`align-items` 속성

align-items 속성은 교차 축(크로스 축)을 기준으로 그리드 또는 플렉스 컨테이너 안의 모든 아이템을 정렬합니다. CSS Grid에서는 행을 기준으로 수직 정렬을, Flexbox에서는 교차 축(세로 축 또는 가로 축)에 대해 정렬을 제어합니다.

stretch: 아이템을 교차 축을 따라 늘립니다(기본값).
flex-start / start: 교차 축의 시작점에 아이템을 정렬합니다.
flex-end / end: 교차 축의 끝점에 아이템을 정렬합니다.
center: 아이템을 교차 축의 중앙에 정렬합니다.
baseline: 텍스트의 기준선을 기준으로 정렬합니다.

.container {
  display: grid;
  align-items: center;
}

`align-self` 속성

align-self 속성은 특정 그리드 아이템이나 플렉스 아이템이 교차 축을 기준으로 개별적으로 다르게 정렬될 수 있게 합니다. 개별 아이템마다 align-items와는 다른 정렬 방식이 가능하게 합니다.

auto: 부모의 align-items 속성을 따릅니다(기본값).
stretch: 아이템을 교차 축을 따라 늘립니다.
flex-start / start: 교차 축의 시작점에 정렬합니다.
flex-end / end: 교차 축의 끝점에 정렬합니다.
center: 교차 축의 중앙에 정렬합니다.
baseline: 텍스트의 기준선에 맞춰 정렬합니다.

.item {
  align-self: flex-end;
}

`justify-items` 속성

justify-items 속성은 주 축(메인 축)을 기준으로 그리드 컨테이너 안의 모든 그리드 아이템을 정렬합니다. 그리드 셀 내에서 아이템의 수평 정렬을 제어합니다.

start: 아이템을 셀의 시작점에 정렬.
end: 아이템을 셀의 끝점에 정렬.
center: 아이템을 셀의 중앙에 정렬.
stretch: 아이템을 셀을 가득 채우도록 늘림(기본값).

.container {
  display: grid;
  justify-items: center;
}

`justify-self` 속성

justify-self 속성은 특정 그리드 아이템을 주 축(가로 방향)을 기준으로 개별적으로 다르게 정렬할 수 있게 합니다. 그리드 컨테이너의 개별 셀 내에서 아이템의 수평 정렬을 설정할 수 있습니다.

start: 셀의 시작점에 정렬.
end: 셀의 끝점에 정렬.
center: 셀의 중앙에 정렬.
stretch: 셀을 가득 채우도록 늘림(기본값).

.item {
  justify-self: end;
}

`place-items` 속성

place-items 속성은 align-items와 justify-items 속성을 한 번에 설정할 수 있는 단축 속성입니다. 그리드 컨테이너 내에서 아이템을 교차 축과 주 축 기준으로 동시에 정렬합니다.

place-items: <align-items 값> <justify-items 값>;

.container {
  display: grid;
  place-items: center start;
}

`place-self` 속성

place-self 속성은 align-self와 justify-self 속성을 한 번에 설정할 수 있는 단축 속성입니다. 개별 그리드 아이템이 교차 축과 주 축에서 동시에 어떻게 정렬될지 설정합니다.

place-self: <align-self 값> <justify-self 값>;

.item {
  place-self: center end;
}

배치 속성

`grid-template-areas` 속성

grid-template-areas 속성은 그리드 컨테이너 내의 영역을 이름으로 정의하여 그리드 레이아웃을 직관적으로 설정할 수 있습니다. 각 셀에 이름을 지정하고, 그 이름을 기반으로 그리드 레이아웃을 쉽게 배치할 수 있습니다.

none: 영역을 설정하지 않음.
문자열을 사용하여 그리드 영역을 설정합니다.

grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

`grid-area` 속성

grid-area 속성은 그리드 아이템을 grid-template-areas로 정의된 영역에 배치하거나, grid-row 및 grid-column 속성을 단축형으로 한 번에 설정할 수 있습니다. 즉, 그리드 내에서 아이템이 어디에 위치할지를 정의합니다.

영역 이름을 사용: grid-area: <area-name>;
단축형 사용: grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;

.item {
  grid-area: 1 / 2 / 3 / 4; /* 1행 2열 시작, 3행 4열 끝 */
}

또는 영역 이름을 사용할 경우:

.item {
  grid-area: header;
}

`grid-column-start` 속성

grid-column-start 속성은 그리드 아이템이 어느 열에서 시작할지를 지정합니다.

정수값: 시작하는 열 번호를 지정.
span <number>: 지정된 숫자만큼 열을 건너뜁니다.
auto: 기본값으로 자동 배치.

.item {
  grid-column-start: 2;
}

`grid-column-end` 속성

grid-column-end 속성은 그리드 아이템이 어느 열에서 끝날지를 지정합니다.

정수값: 끝나는 열 번호를 지정.
span <number>: 지정된 숫자만큼 열을 차지합니다.
auto: 기본값으로 자동 배치.

.item {
  grid-column-end: 4;
}

`grid-row-start` 속성

grid-row-start 속성은 그리드 아이템이 어느 행에서 시작할지를 지정합니다.

정수값: 시작하는 행 번호를 지정.
span <number>: 지정된 숫자만큼 행을 건너뜁니다.
auto: 기본값으로 자동 배치.

.item {
  grid-row-start: 1;
}

`grid-row-end` 속성

grid-row-end 속성은 그리드 아이템이 어느 행에서 끝날지를 지정합니다.

정수값: 끝나는 행 번호를 지정.
span <number>: 지정된 숫자만큼 행을 차지합니다.
auto: 기본값으로 자동 배치.

.item {
  grid-row-end: 3;
}

`grid-column` 속성

grid-column 속성은 grid-column-start와 grid-column-end 속성을 단축형으로 한 번에 설정할 수 있습니다. 아이템이 그리드 내에서 어느 열에서 시작하고, 어느 열에서 끝날지를 정의합니다.

grid-column: <grid-column-start> / <grid-column-end>;

.item {
  grid-column: 2 / 4;
}

`grid-row` 속성

grid-row 속성은 grid-row-start와 grid-row-end 속성을 단축형으로 한 번에 설정할 수 있습니다. 아이템이 그리드 내에서 어느 행에서 시작하고, 어느 행에서 끝날지를 정의합니다.

grid-row: <grid-row-start> / <grid-row-end>;

.item {
  grid-row: 1 / 3;
}

정현승

이전 포스트

플렉스

다음 포스트

그리드

그리드 구성 요소

기본 속성

`display` 속성

`grid-template-columns` 속성

`grid-template-rows` 속성

`row-gap` 속성

`column-gap` 속성

`gap` 속성

속성 값

정렬 속성

`align-items` 속성

`align-self` 속성

`justify-items` 속성

`justify-self` 속성

`place-items` 속성

`place-self` 속성

배치 속성

`grid-template-areas` 속성

`grid-area` 속성

`grid-column-start` 속성

`grid-column-end` 속성

`grid-row-start` 속성

`grid-row-end` 속성

`grid-column` 속성

`grid-row` 속성

플렉스

JS 변수

0개의 댓글

그리드

그리드 구성 요소

기본 속성

display 속성

grid-template-columns 속성

grid-template-rows 속성

row-gap 속성

column-gap 속성

gap 속성

속성 값

정렬 속성

align-items 속성

align-self 속성

justify-items 속성

justify-self 속성

place-items 속성

place-self 속성

배치 속성

grid-template-areas 속성

grid-area 속성

grid-column-start 속성

grid-column-end 속성

grid-row-start 속성

grid-row-end 속성

grid-column 속성

grid-row 속성

플렉스

JS 변수

0개의 댓글

`display` 속성

`grid-template-columns` 속성

`grid-template-rows` 속성

`row-gap` 속성

`column-gap` 속성

`gap` 속성

`align-items` 속성

`align-self` 속성

`justify-items` 속성

`justify-self` 속성

`place-items` 속성

`place-self` 속성

`grid-template-areas` 속성

`grid-area` 속성

`grid-column-start` 속성

`grid-column-end` 속성

`grid-row-start` 속성

`grid-row-end` 속성

`grid-column` 속성

`grid-row` 속성