그리드 레이아웃을 스타일링한 6가지 예제를 아래에 제시하겠습니다. 각 예제는 HTML 및 CSS 코드로 구성되어 있으며, 상세한 주석과 함께 설명됩니다.
예제 1: 기본 그리드 레이아웃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드 레이아웃 예제</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 그리드 스타일 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #007BFF;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
이 예제는 기본적인 그리드 레이아웃을 보여줍니다. .grid-container 요소가 그리드 컨테이너로 설정되고, 그 안에 .grid-item 요소들이 그리드 아이템으로 배치됩니다.
예제 2: 그리드 템플릿 영역
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드 템플릿 영역 예제</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 그리드 스타일 */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 20px;
}
.grid-item {
background-color: #007BFF;
color: #fff;
padding: 20px;
text-align: center;
}
.header {
grid-column: 1 / span 3;
}
.sidebar {
grid-row: 2 / span 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item header">Header</div>
<div class="grid-item sidebar">Sidebar</div>
<div class="grid-item">Content 1</div>
<div class="grid-item">Content 2</div>
<div class="grid-item">Content 3</div>
<div class="grid-item">Content 4</div>
</div>
</body>
</html>
이 예제에서는 그리드 템플릿 영역을 사용하여 다양한 그리드 아이템을 배치합니다. grid-template-columns 및 grid-template-rows 속성을 사용하여 그리드의 열과 행을 정의하고, .header 및 .sidebar 클래스를 사용하여 그리드 아이템의 위치를 설정합니다.
예제 3: 그리드 아이템 배치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드 아이템 배치 예제</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 그리드 스타일 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #007BFF;
color: #fff;
padding: 20px;
text-align: center;
}
.item-1 {
grid-column: 1 / span 2;
}
.item-2 {
grid-row: 2;
}
.item-3 {
grid-column: 3;
grid-row: 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">Item 1</div>
<div class="grid-item item-2">Item 2</div>
<div class="grid-item item-3">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
이 예제에서는 그리드 아이템을 명시적으로 배치합니다. .item-1, .item-2, .item-3 클래스를 사용하여 각각의 아이템을 특정 위치에 배치합니다.
예제 4: 그리드 아이템 정렬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드 아이템 정렬 예제</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 그리드 스타일 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: center;
justify-content: center;
height: 100vh;
}
.grid-item {
background-color: #007BFF;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
이 예제에서는 그리드 아이템을 가운데 정렬하고, 그리드 컨테이너를 화면의 높이(100vh)에 맞추는 방법을 보여줍니다. align-items 및 justify-content 속성을 사용하여 아이템을 정렬합니다.
예제 5: 그리드 아이템 스팬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드 아이템 스팬 예제</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 그리드 스타일 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #007BFF;
color: #fff;
padding: 20px;
text-align: center;
}
.item-1 {
grid-column: span 3;
}
.item-2 {
grid-row: span 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item-1">Item 1</div>
<div class="grid-item item-2">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
이 예제에서는 그리드 아이템의 스팬을 설정합니다. .item-1 클래스를 사용하여 첫 번째 아이템이 3개의 열을 스팬하도록 하고, .item-2 클래스를 사용하여 두 번째 아이템이 2개의 행을 스팬하도록 합니다.
예제 6: 그리드 오토 플로우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드 오토 플로우 예제</title>
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 그리드 스타일 */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.grid-item {
background-color: #007BFF;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
이 예제에서는 그리드 아이템을 자동으로 플로우하도록 설정합니다. grid-template-columns 속성을 auto-fill과 minmax() 함수를 사용하여 설정하면, 화면 너비에 따라 그리드 컬럼이 자동으로 조절됩니다.
'CSS' 카테고리의 다른 글
| 레이지 로딩: 이미지 레이지 로딩 구현. (0) | 2023.12.23 |
|---|---|
| 아코디언 메뉴: 아코디언 메뉴 스타일링. (0) | 2023.12.23 |
| 헤더 스크롤 효과: 스크롤 시 헤더 효과. (0) | 2023.12.23 |
| 랜딩 페이지 디자인: 랜딩 페이지 디자인. (0) | 2023.12.23 |
| 풀 페이지 스크롤: 풀 페이지 스크롤 디자인. (0) | 2023.12.23 |
