CSS 그리드 컨테이너

1
2
3
4
5
6
7
8

직접 시도해 보세요

그리드 컨테이너

HTML 요소가 그리드 컨테이너로 사용되도록 하려면, 다음과 같이 설정해야 합니다: display 속성은 grid 또는 inline-grid로 설정됩니다.

그리드 컨테이너는 열과 행 내에 배치된 그리드 아이템으로 구성됩니다.

grid-template-columns 속성

grid-template-columns 속성은 그리드 레이아웃의 열 수를 정의하며, 각 열의 너비를 정의할 수 있습니다.

이 값은 공백으로 구분된 목록으로, 각 값은 해당 열의 길이를 정의합니다.

그리드 레이아웃이 4 개 열을 포함하려면, 이 4 개 열의 너비를 지정해야 합니다; 모든 열이 동일한 너비를 가질 경우 'auto'로 설정합니다.

예제

4 개 열을 포함한 그리드를 생성합니다:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

직접 시도해 보세요

주의:4 개 열의 그리드에서 4 개 이상의 아이템이 있으면, 그리드는 자동으로 새 행을 추가하고 이 아이템들을 그 안에 넣습니다.

grid-template-columns 속성은 열의 크기(너비)를 지정할 수도 있습니다.

예제

이 4 개 열의 크기를 설정합니다:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

직접 시도해 보세요

grid-template-rows 속성

grid-template-rows 속성은 각 열의 높이를 정의합니다.

1
2
3
4
5
6
7
8

그 값은 공백으로 구분된 목록으로, 각 값은 해당 행의 높이를 정의합니다:

예제

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

직접 시도해 보세요

justify-content 속성

justify-content 속성은 컨테이너 내에서 전체 그리드를 정렬하는 데 사용됩니다.

1
2
3
4
5
6
7
8

주의:그리드의 총 너비는 컨테이너의 너비보다 작아야 justify-content 속성이 작동합니다.

예제

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

직접 시도해 보세요

예제

.grid-container {
  display: grid;
  justify-content: space-around;
}

직접 시도해 보세요

예제

.grid-container {
  display: grid;
  justify-content: space-between;
}

직접 시도해 보세요

예제

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

직접 시도해 보세요

예제

.grid-container {
  display: grid;
  justify-content: start;
}

직접 시도해 보세요

예제

.grid-container {
  display: grid;
  justify-content: end;
}

직접 시도해 보세요

align-content 속성

align-content 속성은 컨테이너 내 전체 그리드를 수직 정렬하는 데 사용됩니다.

1
2
3
4
5
6
7
8

주의:그리드의 총 높이는 컨테이너의 높이보다 작아야 align-content 속성이 적용됩니다.

예제

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

직접 시도해 보세요

예제

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

직접 시도해 보세요

예제

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

직접 시도해 보세요

예제

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

직접 시도해 보세요

예제

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

직접 시도해 보세요

예제

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

직접 시도해 보세요