CSS 그리드 컨테이너
1
2
삼
4
5
6
7
8
그리드 컨테이너
displayHTML 요소가 그리드 컨테이너처럼 작동하도록 하려면 속성을
grid또는 로 설정해야 합니다 inline-grid.
그리드 컨테이너는 열과 행 내부에 배치된 그리드 항목으로 구성됩니다.
grid-template-columns 속성
속성 은 grid-template-columns그리드 레이아웃의 열 수를 정의하고 각 열의 너비를 정의할 수 있습니다.
값은 공백으로 구분된 목록이며, 여기서 각 값은 해당 열의 너비를 정의합니다.
그리드 레이아웃에 4개의 열이 포함되도록 하려면 4개의 열 너비를 지정하거나 모든 열의 너비가 같아야 하는 경우 "자동"을 지정합니다.
예시
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
삼
4
5
6
7
8
값은 공백으로 구분된 목록이며, 여기서 각 값은 해당 행의 높이를 정의합니다.
예시
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
justify-content 속성
justify-content속성은 컨테이너 내부의 전체 그리드를 정렬하는 데 사용됩니다 .
1
2
삼
4
5
6
참고: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
참고: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;
}