CSS 그리드 속성 리스트

chatGTP

 

CSS 그리드 속성 리스트

CSS Grid는 다양한 속성을 제공하여 그리드 레이아웃을 세밀하게 제어할 수 있습니다.

아래는 CSS Grid의 주요 속성들을 분류하여 리스트업한 것입니다:

 

1. Grid Container 속성:

- `display`: 그리드 컨테이너를 정의합니다. 값으로 `grid`를 사용합니다.
- `grid-template-columns`: 열의 크기를 정의합니다.
- `grid-template-rows`: 행의 크기를 정의합니다.
- `grid-template-areas`: 그리드 템플릿 영역을 지정하여 그리드 아이템을 배치합니다.
- `grid-template`: `grid-template-columns`, `grid-template-rows`, `grid-template-areas`를 한 번에 정의합니다.
- `grid-column-gap`: 열 사이의 간격을 설정합니다.
- `grid-row-gap`: 행 사이의 간격을 설정합니다.
- `grid-gap`: `grid-row-gap`, `grid-column-gap`을 한 번에 설정합니다.

 

2. Grid Item 속성:

- `grid-column-start`: 그리드 아이템의 시작 열을 지정합니다.
- `grid-column-end`: 그리드 아이템의 끝 열을 지정합니다.
- `grid-row-start`: 그리드 아이템의 시작 행을 지정합니다.
- `grid-row-end`: 그리드 아이템의 끝 행을 지정합니다.
- `grid-column`: `grid-column-start`, `grid-column-end`를 한 번에 지정합니다.
- `grid-row`: `grid-row-start`, `grid-row-end`를 한 번에 지정합니다.
- `grid-area`: `grid-row-start`, `grid-column-start`, `grid-row-end`, `grid-column-end`를 한 번에 지정합니다.

 

3. 그리드 아이템 정렬 속성:

- `justify-items`: 그리드 아이템들을 수평 방향으로 정렬합니다.
- `align-items`: 그리드 아이템들을 수직 방향으로 정렬합니다.
- `place-items`: `justify-items`, `align-items`를 한 번에 지정합니다.
- `justify-content`: 그리드 컨테이너 안에서 그리드 아이템들을 수평 방향으로 정렬합니다.
- `align-content`: 그리드 컨테이너 안에서 그리드 아이템들을 수직 방향으로 정렬합니다.
- `place-content`: `justify-content`, `align-content`를 한 번에 지정합니다.
- `justify-self`: 개별 그리드 아이템의 수평 정렬을 지정합니다.
- `align-self`: 개별 그리드 아이템의 수직 정렬을 지정합니다.
- `place-self`: `justify-self`, `align-self`를 한 번에 지정합니다.

 

4. 그리드 흐름 속성:

- `grid-auto-columns`: 추가적인 열의 크기를 정의합니다.
- `grid-auto-rows`: 추가적인 행의 크기를 정의합니다.
- `grid-auto-flow`: 추가적인 그리드 아이템의 배치 방법을 지정합니다.

 

5. 그리드 라인 속성:

- `grid-column-gap`: 열 사이의 간격을 설정합니다.
- `grid-row-gap`: 행 사이의 간격을 설정합니다.
- `grid-gap`: `grid-row-gap`, `grid-column-gap`을 한 번에 설정합니다.

 

이외에도 더 다양한 CSS Grid 속성들이 있지만, 위에 나열된 속성들은 가장 중요하고 자주 사용되는 속성들입니다. CSS Grid를 이용하면 유연하고 복잡한 레이아웃을 구현할 수 있으며, 웹 디자인을 더욱 효과적으로 할 수 있습니다.