4.1 grid-column 속성
CSS Grid Layout은 그리드에서 요소의 배치를 관리하기 위한 강력한 도구를 제공합니다. 주요 도구 중 하나는 grid-row와 grid-column 속성입니다. 이 속성들은 개발자가 그리드-요소가 차지해야 할 행과 열을 정확하게 지정할 수 있도록 하며, 레이아웃에 대한 유연성과 제어를 제공합니다.
grid-column 속성은 그리드 컨테이너 내에서 요소가 차지할 열을 정의합니다.
문법:
.grid-item {
grid-column: start / end;
}
여기서:
start: 그리드의 시작 라인end: 그리드의 끝 라인
예제 1: 특정 열에 요소 배치하기
이 예제에서 요소는 두 번째와 세 번째 그리드 라인 사이에 배치되어 두 번째 열을 차지합니다:
.grid-item {
grid-column: 2 / 3; /* 요소는 두 번째와 세 번째 그리드 라인 사이의 공간을 차지한다 */
}
예제 2: 여러 열을 차지하는 요소
이 예제에서 요소는 첫 번째 라인에서 시작하여 네 번째 라인에서 끝나는 세 개의 열을 차지합니다:
.grid-item {
grid-column: 1 / 4; /* 요소는 첫 번째에서 네 번째 그리드 라인까지의 공간을 차지한다 */
}
예제 3: 여러 열을 포괄하기 위한 span 사용
이 예제에서 요소는 현재 위치에서 두 개의 열을 차지합니다:
.grid-item {
grid-column: span 2; /* 요소는 현재 위치에서 두 개의 열을 차지한다 */
}
4.2 grid-row 속성
grid-row 속성은 그리드 컨테이너 내에서 요소가 차지할 행을 정의합니다.
문법:
.grid-item {
grid-row: start / end;
}
여기서:
start: 그리드의 시작 라인end: 그리드의 끝 라인
예제 1: 특정 행에 요소 배치하기
이 예제에서 요소는 첫 번째와 두 번째 그리드 라인 사이에 배치되어 첫 번째 행을 차지합니다:
.grid-item {
grid-row: 1 / 2; /* 요소는 첫 번째와 두 번째 그리드 라인 사이의 공간을 차지한다 */
}
예제 2: 여러 행을 차지하는 요소
이 예제에서 요소는 두 번째 라인에서 시작하여 네 번째 라인에서 끝나는 두 개의 행을 차지합니다:
.grid-item {
grid-row: 2 / 4; /* 요소는 두 번째에서 네 번째 그리드 라인까지의 공간을 차지한다 */
}
예제 3: 여러 행을 포괄하기 위한 span 사용
이 예제에서 요소는 현재 위치에서 세 개의 행을 차지합니다:
.grid-item {
grid-row: span 3; /* 요소는 현재 위치에서 세 개의 행을 차지한다 */
}
예제 4. 음수 값을 사용하여 배치하기
.element {
grid-row: 1 / -1; /* 요소는 첫 번째 라인에서 시작하여 마지막 라인에서 끝난다 */
}
4.3 grid-row와 grid-column 속성의 조합 사용
보다 복잡한 레이아웃을 만들기 위해 grid-row와 grid-column 속성을 조합하여 요소의 배치를 정확하게 제어할 수 있습니다.
예제: grid-row와 grid-column을 사용한 복잡한 레이아웃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Row and Column Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-row: 1 / 3; /* 요소는 첫 번째와 두 번째 행을 차지한다 */
grid-column: 1 / 3; /* 요소는 첫 번째와 두 번째 열을 차지한다 */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* 요소는 세 번째와 네 번째 행을 차지한다 */
grid-column: 2 / 5; /* 요소는 두 번째, 세 번째, 네 번째 열을 차지한다 */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* 요소는 첫 번째 행을 차지한다 */
grid-column: 3 / 5; /* 요소는 세 번째와 네 번째 열을 차지한다 */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
설명:
- 컨테이너
.container는 각각 동일한 공간을 차지하는 네 개의 행과 네 개의 열을 갖고 있습니다 - 요소
.item1는 첫 번째와 두 번째 행 및 첫 번째와 두 번째 열을 차지합니다 - 요소
.item2는 세 번째와 네 번째 행 및 두 번째, 세 번째, 네 번째 열을 차지합니다 - 요소
.item3는 첫 번째 행 및 세 번째와 네 번째 열을 차지합니다
GO TO FULL VERSION