그리드 레이아웃과 관련된 CSS 속성
이 기사는 그리드 레이아웃과 관련된 CSS 속성을 설명합니다.
그리드와 인라인 그리드를 설명하는 방법을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-grid.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-grid.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>grid</h3>
23 <section style="width: 100%; height: 350px;">
24 <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
25 <section class="sample-view">
26 <div class="grid-box">
27 <div class="grid-item">Item 1</div>
28 <div class="grid-item">Item 2</div>
29 <div class="grid-item">Item 3</div>
30 <div class="grid-item">Item 4</div>
31 <div class="grid-item">Item 5</div>
32 <div class="grid-item">Item 6</div>
33 </div>
34 </section>
35 </section>
36 <section style="width: 100%; height: 550px;">
37 <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
38 <section class="sample-view">
39 <div class="grid-container" style="color: #666;">
40 <header class="grid-header">Header</header>
41 <aside class="grid-sidebar">Sidebar</aside>
42 <article class="grid-content">
43 <p>Content</p>
44 </article>
45 <aside class="grid-ads">Ads</aside>
46 <footer class="grid-footer">Footer</footer>
47 </div>
48 </section>
49 </section>
50 </article>
51 <article>
52 <h3>gap</h3>
53 <section style="height: 300px;">
54 <header><h4>display: grid; gap: 30px 10px;</h4></header>
55 <section class="sample-view">
56 <div class="gap-grid-container">
57 <div>Item 1</div>
58 <div>Item 2</div>
59 <div>Item 3</div>
60 <div>Item 4</div>
61 <div>Item 5</div>
62 <div>Item 6</div>
63 </div>
64 </section>
65 </section>
66 <section>
67 <header><h4>display: flex; gap: 50px;</h4></header>
68 <section class="sample-view">
69 <div class="gap-flex-container">
70 <div>Item 1</div>
71 <div>Item 2</div>
72 <div>Item 3</div>
73 </div>
74 </section>
75 </section>
76 </article>
77 <article>
78 <h3>grid-template-areas</h3>
79 <section style="height: 350px;">
80 <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
81 <section class="sample-view">
82 <div class="grid-template-areas-container">
83 <div class="grid-template-areas-header">Header</div>
84 <div class="grid-template-areas-sidebar">Sidebar</div>
85 <div class="grid-template-areas-content">Content</div>
86 <div class="grid-template-areas-footer">Footer</div>
87 </div>
88 </section>
89 </section>
90 </article>
91 <article>
92 <h3>inline-grid</h3>
93 <section>
94 <header><h4>display: inline-grid</h4></header>
95 <section class="sample-view">
96 Here is an inline grid:
97 <span class="inline-grid-container">
98 <div class="inline-grid-item">1</div>
99 <div class="inline-grid-item">2</div>
100 <div class="inline-grid-item">3</div>
101 <div class="inline-grid-item">4</div>
102 </span>
103 This is contained within a paragraph.
104 </section>
105 </section>
106 </article>
107 </main>
108</body>
109</html>그리드 레이아웃
grid
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 200px auto;
4 grid-template-rows: 100px auto 50px;
5 gap: 10px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16 border: 2px solid black;
17}그리드는 요소를 2차원 행과 열에 정렬하는 레이아웃 시스템입니다. 그리드를 사용하면 기존의 float 또는 position 방식으로는 어려웠던 복잡한 레이아웃을 쉽고 유연하게 구성할 수 있습니다. 플렉스박스가 1차원 레이아웃에 뛰어나다면, 그리드는 2차원 레이아웃에 적합합니다.
grid-box클래스는display속성에grid를 지정하여 그리드 레이아웃을 적용합니다. 이 요소는 그리드 컨테이너라고 합니다.grid-template-columns속성은 그리드 열의 너비를 지정합니다. 이 예제에서는 첫 번째 열이 100px, 두 번째 열이 200px이며, 세 번째 열은 남은 공간을 차지합니다(auto).grid-template-rows속성은 그리드 행의 높이를 지정합니다. 첫 번째 행은 100px, 두 번째 행은 자동(auto), 세 번째 행은 50px 높이입니다.gap속성은 그리드 아이템 간의 간격을 설정합니다. 열과 행 사이에 10px 간격을 추가합니다.
기본 용어
- 그리드 컨테이너는
display속성이grid로 설정된 요소이며, 그 하위 항목들이 그리드 아이템이 됩니다. - 그리드 아이템은 그리드 컨테이너 바로 아래에 배치된 하위 요소들입니다.
주요 그리드 속성
grid-template-columns & grid-template-rows
1.container {
2 grid-template-columns: 1fr 2fr 1fr;
3}grid-template-columns와grid-template-rows속성은 각 열과 행의 크기를 정의합니다.px와%같은 단위뿐만 아니라 남은 공간의 비율을 나타내는fr(fraction) 단위도 사용할 수 있습니다.- 이 예제에서는 세 개의 열이 있으며, 두 번째 열은 다른 열보다 두 배 넓습니다.
grid-column & grid-row
1.container {
2 display: grid;
3 grid-template-columns: repeat(4, 1fr); /* 4 columns */
4 grid-template-rows: repeat(3, 100px); /* 3 rows */
5}
6
7.item {
8 grid-column: 2 / 4;
9 grid-row: 1 / 3;
10}grid-column과grid-row는 그리드 아이템이 배치될 열과 행을 지정합니다.- 이 예제에서 아이템은 두 번째 열부터 네 번째 열까지, 첫 번째 행부터 세 번째 행까지 걸쳐 있습니다.
grid-auto-rows & grid-auto-columns
1.container {
2 display: grid;
3 grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
4 grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
5 grid-auto-rows: 150px; /* Automatically added rows will be 150px */
6 grid-auto-columns: 100px; /* Automatically added columns will be 100px */
7}
8
9.item {
10 grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11 grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}grid-auto-rows와grid-auto-columns는 그리드 레이아웃의 선이나 열이 명시적으로 정의되지 않았을 때 자동으로 생성되는 행과 열의 크기를 제어하는 속성입니다.- 이 예제에서는 2개의 행과 2개의 열이 명시적으로 정의되어 있지만, 더 많은 요소가 추가되면
grid-auto-rows와grid-auto-columns에 따라 새로운 행과 열이 자동으로 생성됩니다.
- 이 예제에서는 2개의 행과 2개의 열이 명시적으로 정의되어 있지만, 더 많은 요소가 추가되면
justify-items & align-items
1.container {
2 justify-items: center; /* Center items horizontally */
3 align-items: center; /* Center items vertically */
4}- 그리드 아이템을 수평으로 정렬하기 위해 (
justify-items), 수직으로 정렬하기 위해 (align-items) 사용하세요.
grid-area
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5 grid-area: 1 / 2 / 3 / 4;
6}grid-area는 그리드 아이템이 그리드 컨테이너의 어느 영역에 놓여야 하는지를 한 번에 지정합니다.- 이 예제에서는 첫 번째 행부터 세 번째 행까지, 그리고 두 번째 열부터 네 번째 열까지 차지한다는 것을 의미합니다.
gap
1.container {
2 gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}gap은 열과 행 사이에 공간을 추가합니다.column-gap과row-gap을 사용하여 열과 행 사이의 간격을 개별적으로 지정할 수도 있습니다.
grid-auto-flow
1.container {
2 grid-auto-flow: column; /* Add items in the column direction */
3}grid-auto-flow는 아이템이 행 또는 열 방향으로 배치되는 방식을 설정하는 속성입니다.
복잡한 레이아웃의 예제입니다.
1.grid-container {
2 display: grid;
3 grid-template-columns: 120px 1fr 80px;
4 grid-template-rows: 50px 1fr 50px;
5 gap: 10px;
6 background-color: transparent;
7 border: none;
8 height: 400px;
9}
10
11.grid-header {
12 grid-column: 1 / 4;
13 background-color: lightblue;
14}
15
16.grid-sidebar {
17 grid-column: 1 / 2;
18 grid-row: 2 / 3;
19 height: 100%;
20 background-color: lightslategray;
21 color: white;
22}
23
24.grid-content {
25 grid-column: 2 / 3;
26 grid-row: 2 / 3;
27 background-color: lightskyblue;
28}
29
30.grid-content p {
31 margin: 0;
32 padding: 0;
33 height: 260px;
34}
35
36.grid-ads {
37 grid-column: 3 / 4;
38 grid-row: 2 / 3;
39 height: 100%;
40 background-color: lightsteelblue;
41}
42
43.grid-footer {
44 grid-column: 1 / 4;
45 background-color: lightgray;
46}이와 같은 방식으로, 그리드를 사용하면 간단한 코드로 전체 웹페이지 레이아웃을 작성할 수 있습니다.
- 이 예시에서는 세 개의 열(사이드바, 메인 콘텐츠, 광고)과 세 개의 행(헤더, 콘텐츠, 푸터)이 있습니다.
- 헤더와 푸터는 페이지의 전체 너비를 차지하고, 콘텐츠는 중앙에, 사이드바와 광고는 양쪽에 위치합니다.
그리드의 장점
그리드의 장점은 다음과 같습니다:.
- 간단한 2차원 레이아웃: 행과 열에서 레이아웃을 관리하면 적은 코드로도 복잡한 레이아웃을 쉽게 만들 수 있습니다.
- 반응형 디자인과 호환: 그리드 시스템은 다양한 화면 크기에 맞는 반응형 디자인을 쉽게 생성할 수 있게 합니다.
gap 속성
1.gap-grid-container {
2 display: grid;
3 grid-template-columns: repeat(3, 1fr);
4 gap: 30px 10px;
5 background-color: transparent;
6 border: none;
7 height: 200px;
8}
9
10.gap-grid-container div {
11 width: 100px;
12 background-color: lightskyblue;
13}
14
15.gap-flex-container {
16 display: flex;
17 gap: 50px;
18}
19
20.gap-flex-container div {
21 width: 80px;
22 background-color: lightgreen;
23}gap 속성은 그리드 레이아웃과 플렉스박스 레이아웃에서 요소 간의 간격(갭)을 설정하는 데 사용됩니다. 이 속성을 사용하면 자식 요소들 사이에 간격을 쉽게 배치할 수 있습니다.
gap-grid-container클래스에서는 각 요소 사이에 수직으로30px, 수평으로10px의 간격이 설정됩니다.grid-template-columns를 사용하여 3열 그리드가 생성되므로 각 요소 사이에 수직 및 수평으로 간격이 적용됩니다.gap-flex-container클래스에서는 플렉스박스의 세 항목 사이에50px의 간격이 적용됩니다.
기본 구문
1.container {
2 display: grid; /* or flex */
3 gap: <row-gap> <column-gap>;
4}row-gap은 행 간의 간격을 지정합니다. 이는 그리드 또는 플렉스 레이아웃에서의 수직 간격입니다.column-gap은 열 간의 간격을 지정합니다. 이는 수평 간격입니다.
두 값이 지정되지 않으면 하나의 값이 row-gap과 column-gap 모두에 적용됩니다.
gap 속성의 장점
gap 속성의 이점은 다음과 같습니다:.
- 간격 설정 간소화: 자식 요소 간의 간격을 설정하는 코드가 단순해지며, 요소 간의 여백(margin)이나 패딩(padding)을 추가로 설정할 필요가 없습니다.
- 유연한 적용성: 반응형 디자인을 손쉽게 지원하며, 유연한 디자인 조정이 가능합니다.
grid-template-areas 속성
1.grid-template-areas-container {
2 display: grid;
3 grid-template-columns: 1fr 2fr; /* 2 columns */
4 grid-template-rows: auto auto; /* 2 rows */
5 grid-template-areas:
6 "header header"
7 "sidebar content"
8 "footer footer"; /* In the 3rd row, the footer spans across */
9 gap: 10px;
10 height: 250px;
11}
12
13.grid-template-areas-container div {
14 width: 100%;
15 height: 100%;
16}
17
18.grid-template-areas-header {
19 grid-area: header; /* Placed in the "header" area */
20 background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24 grid-area: sidebar; /* Placed in the "sidebar" area */
25 background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29 grid-area: content; /* Placed in the "content" area */
30 background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34 grid-area: footer; /* Placed in the "footer" area */
35 background-color: lightsteelblue;
36}grid-template-areas 속성은 그리드 컨테이너 내 영역에 이름을 지정하고, 해당 이름을 사용해 그리드 요소를 쉽게 배치하는 방법을 제공해줍니다. 이 속성을 사용하면 시각적으로 직관적인 레이아웃 정의가 가능합니다.
grid-template-areas 속성에 의해 지정된 이름 있는 영역에 배치된 요소는 grid-area 속성으로 동일한 이름을 가져야 합니다. 요소가 여러 셀에 걸쳐 있더라도 자동으로 올바르게 배치됩니다.
이 예제에서 그리드는 다음과 같이 생성됩니다:.
- 첫 번째 행에서는 "header"가 두 열에 걸쳐 배치됩니다.
- 두 번째 행에서는 "sidebar"가 왼쪽에, "content"가 오른쪽에 배치됩니다.
- 세 번째 행에서는 "footer"가 두 열에 걸쳐 배치됩니다.
기본 사용법
1grid-template-areas:
2 "area1 area2 area3"
3 "area1 area4 area5";grid-template-areas 속성에서는 각 행에 대한 영역 이름이 지정됩니다. 지정된 이름이 있는 영역에 요소를 배치함으로써, 레이아웃을 쉽게 생성할 수 있습니다.
- 이 예제에서는 2행 3열로 구성된 그리드가 생성되며, 각 셀은 area1, area2 등으로 이름이 지정됩니다.
.을 사용하여 빈 셀 정의하기
1grid-template-areas:
2 "header header header"
3 "sidebar . content"
4 "footer footer footer";레이아웃에서 빈 셀을 사용하려면 .(점)을 사용하여 빈 셀을 나타낼 수 있습니다.
- 이 예시처럼, sidebar와 content 사이에 .을 지정하면 두 번째 열이 비어 있게 됩니다.
grid-template-areas 속성의 장점
grid-template-areas 속성의 장점은 다음과 같은 점들이 포함됩니다.
- 시각적 레이아웃: 레이아웃을 시각적으로 표현할 수 있어 디자인을 이해하기가 더 쉽습니다.
- 간편한 요소 이동: HTML을 수정하지 않고 CSS에서 영역 정의를 변경하여 요소 레이아웃을 쉽게 조정할 수 있습니다.
노트
grid-template-areas 속성을 사용할 때는 다음 사항에 유의하는 것이 중요합니다.
- 각 행의 이름 수는 정의된 열 수와 일치해야 합니다.
- 여러 셀에 동일한 이름을 지정하면 그 셀들이 병합되지만, 다른 행이나 열에 할당할 경우 해당 영역은 정사각형이어야 합니다.
inline-grid
1.inline-grid-container {
2 display: inline-grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 5px;
5 background-color: lightblue;
6}
7.inline-grid-item {
8 background-color: lightskyblue;
9 width: 50px;
10 padding: 0;
11 margin: 0;
12}inline-grid는 CSS에서 display 속성의 값 중 하나입니다. 이 속성을 적용하면 요소가 인라인 레벨 컨테이너로 작동하며 내부에 그리드 형식 컨텍스트를 생성합니다. display: grid와 달리, 문서 흐름에서 인라인 요소로 작동합니다.
inline-grid의 사용 사례
inline-grid는 grid만큼 일반적이지 않지만 특정 시나리오에서 효과적으로 사용할 수 있습니다.
-
인라인 컨텍스트 내의 그리드: 텍스트 콘텐츠나 다른 인라인 요소와 함께 그리드를 배치하고 싶을 때 유용합니다. 예를 들어, 버튼, 배지, 라벨 등 그리드 구조가 필요하지만 텍스트의 흐름을 방해하지 않고 인라인으로 표시하려는 경우에 유용합니다.
-
인라인 요소 내의 레이아웃 제어: 링크, 버튼 또는 span과 같은 인라인 요소 내에서 복잡한 레이아웃이 필요할 때,
inline-grid는 블록 표시를 피하면서 그리드 레이아웃으로 내부 구조를 관리할 수 있습니다.
1<button class="inline-grid">
2 <span>Icon</span>
3 <span>Text</span>
4</button>이 경우 버튼이 아이콘과 텍스트를 그리드로 표시하되, 문서 흐름에서 인라인 상태를 유지합니다.
- 반응형 인라인 컴포넌트:
inline-grid는 인라인 콘텐츠의 일부이며 그리드 레이아웃이 필요한 작은 컴포넌트에 사용할 수 있습니다. 예를 들어, 인라인 양식, 배지, 제품 라벨 등 그리드를 사용하여 레이아웃을 조정하면서 인라인 상태를 유지하려는 경우에 적합합니다.
inline-grid의 정렬 및 크기 조정
1.inline-grid {
2 display: inline-grid;
3 vertical-align: middle;
4}- 다른 인라인 요소처럼,
inline-grid는 주변 콘텐츠에 대해 수직 정렬을 따릅니다.vertical-align속성을 사용하여 그리드의 정렬을 제어할 수 있습니다.
1.inline-grid {
2 display: inline-grid;
3 width: 200px;
4 height: 100px;
5}- 크기와 관련하여,
inline-grid요소는 그리드 콘텐츠에 필요한 너비만을 차지합니다. 필요한 경우, 너비, 높이, 최소/최대 크기를 명시적으로 설정할 수 있습니다.
1.inline-grid {
2 display: inline-grid;
3 grid-template-columns: auto 1fr;
4}inline-grid 컨테이너의 크기는 그리드 자체의 레이아웃에 의해 결정될 수도 있으며, 이러한 경향은 fr, auto, 백분율과 같은 유연한 단위 사용 시 더욱 강하게 나타납니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.