CSS 그리드 레이아웃 모듈

❮ 이전의 다음 ❯

헤더

메뉴

기본

오른쪽

보행인

그리드 레이아웃

CSS 그리드 레이아웃 모듈은 행과 열이 있는 그리드 기반 레이아웃 시스템을 제공하므로 부동 소수점과 위치 지정을 사용하지 않고도 웹 페이지를 더 쉽게 디자인할 수 있습니다.

브라우저 지원

그리드 속성은 모든 최신 브라우저에서 지원됩니다.


57.0	16.0	52.0	10	44

그리드 요소

그리드 레이아웃은 하나 이상의 자식 요소가 있는 부모 요소로 구성됩니다.

예시

1

2

3

4

5

6

7

8

9

속성 표시

HTML 요소는 display속성이 grid또는 로 설정되면 그리드 컨테이너가 됩니다 inline-grid.

예시

.grid-container {
display: grid;
}

예시

.grid-container {
display: inline-grid;
}

그리드 컨테이너의 모든 직계 자식은 자동으로 그리드 항목 이 됩니다 .

그리드 열

그리드 항목의 수직선을 열 이라고 합니다.

그리드 행

그리드 항목의 수평선을 행 이라고 합니다 .

그리드 간격

각 열/행 사이의 공백을 간격 이라고 합니다.

다음 속성 중 하나를 사용하여 간격 크기를 조정할 수 있습니다.

grid-column-gap
grid-row-gap
grid-gap

예시

속성 은 grid-column-gap열 사이의 간격을 설정합니다.

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

예시

속성 은 grid-row-gap행 사이의 간격을 설정합니다.

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

예시

속성은 및 속성 에 grid-gap대한 약식 속성입니다 .grid-row-gapgrid-column-gap

.grid-container {
display: grid;
grid-gap: 50px 100px;
}

예시

grid-gap속성을 사용하여 행 간격과 열 간격을 하나의 값으로 설정할 수도 있습니다 .

.grid-container {
display: grid;
grid-gap: 50px;
}

그리드 라인

열 사이의 선을 열 선 이라고 합니다 .

행 사이의 선을 행 선 이라고 합니다 .

그리드 컨테이너에 그리드 항목을 배치할 때 행 번호를 참조하십시오.

예시

열 행 1에 그리드 항목을 배치하고 열 행 3에서 끝나도록 합니다.

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

예시

행 1행에 그리드 항목을 배치하고 행 3행에서 끝나도록 하십시오.

.item1 {
grid-row-start: 1;
grid-row-end: 3;
}

모든 CSS 그리드 속성

Property	Description
column-gap	Specifies the gap between the columns
gap	A shorthand property for the row-gap and the column-gap properties
grid	A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area	Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns	Specifies a default column size
grid-auto-flow	Specifies how auto-placed items are inserted in the grid
grid-auto-rows	Specifies a default row size
grid-column	A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end	Specifies where to end the grid item
grid-column-gap	Specifies the size of the gap between columns
grid-column-start	Specifies where to start the grid item
grid-gap	A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row	A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end	Specifies where to end the grid item
grid-row-gap	Specifies the size of the gap between rows
grid-row-start	Specifies where to start the grid item
grid-template	A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas	Specifies how to display columns and rows, using named grid items
grid-template-columns	Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows	Specifies the size of the rows in a grid layout
row-gap	Specifies the gap between the grid rows

❮ 이전의 다음 ❯

CSS 튜토리얼

CSS 고급

CSS 반응형

CSS 그리드

CSS SASS

CSS 예제

CSS 참조