IT 강좌 CSS 기초 031_그리드 레이아웃 Grid

그리드 레이아웃 Grid

그리드는 수평 및 수직 선으로 구성된 레이아웃 패턴입니다. 그리드를 사용하여 디자인 요소를 배열하고 고정된 위치와 너비를 가진 일련의 요소를 배치하여 웹사이트 페이지를 더욱 통일되게 만들 수 있습니다.

그리드는 일반적으로 많은 열(column) 과 **행(row)**을 가지며, 행과 행, 열과 열 사이의 간격이 있습니다. 이 간격은 일반적으로 **거터(gutter)**라고 합니다.

예제 효과

기본 개념

Grid 레이아웃은 다음과 같은 기본 개념으로 구성됩니다:

그리드 컨테이너 (grid container): 그리드 레이아웃은 그리드 컨테이너와 그리드 항목으로 구성됩니다. 그리드 컨테이너는 그리드 항목을 그리드에 배치하는 컨테이너입니다. 그리드 컨테이너는 모든 요소가 될 수 있지만 일반적으로 div 요소를 사용합니다.
그리드 항목 (grid item): 그리드 항목은 그리드 컨테이너에 배치된 요소입니다. 그리드 항목은 모든 요소가 될 수 있지만 일반적으로 div 요소를 사용합니다.
그리드 선 (grid line): 그리드 선은 그리드 컨테이너를 행과 열로 나누는 선입니다. 그리드 선은 수평선 또는 수직선일 수 있습니다.
그리드 열 (grid column): 그리드 열은 그리드 컨테이너에서 수직 방향의 선입니다.
그리드 행 (grid row): 그리드 행은 그리드 컨테이너에서 수평 방향의 선입니다.

일반적인 속성

그리드 컨테이너 속성

그리드 컨테이너는 그리드 레이아웃을 제어하기 위해 다음과 같은 속성을 가집니다:

display: 그리드 컨테이너의 표시 모드를 설정합니다. 그리드 컨테이너는 그리드 레이아웃을 사용하려면 display: grid 또는 display: inline-grid로 설정해야 합니다.
grid-template-columns: 그리드 컨테이너의 열 수와 열 너비를 설정합니다(fr, px, em 등의 단위 사용).
grid-template-rows: 그리드 컨테이너의 행 수와 행 높이를 설정합니다(fr, px, em 등의 단위 사용).
grid-template: grid-template-columns와 grid-template-rows를 동시에 설정합니다.
grid-auto-columns: 그리드 컨테이너의 열 너비를 설정합니다.
grid-auto-rows: 그리드 컨테이너의 행 높이를 설정합니다.

그리드 항목 속성

그리드 항목은 그리드에서 그리드 항목의 레이아웃을 제어하기 위해 다음과 같은 속성을 가집니다:

grid-column: 그리드 항목이 위치한 열을 설정합니다.
grid-row: 그리드 항목이 위치한 행을 설정합니다.
grid-column-start: 열에서 그리드 항목의 시작 위치를 설정합니다.
grid-column-end: 열에서 그리드 항목의 종료 위치를 설정합니다.
grid-row-start: 행에서 그리드 항목의 시작 위치를 설정합니다.
grid-row-end: 행에서 그리드 항목의 종료 위치를 설정합니다.
grid-area: 그리드 항목이 위치한 영역을 설정합니다.
grid-gap: 그리드 선 사이의 간격을 설정합니다.

그리드 레이아웃

고정 및 적응형 열 너비, 행 높이 정의

예제:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* 첫 번째 열 100px, 두 번째 열 200px, 나머지 공간은 적응형 열에 할당 */
5
    grid-template-rows: 100px 200px auto;
6
    /* 첫 번째 행 100px, 두 번째 행 200px, 나머지 공간은 적응형 행에 할당 */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid 데모</div>
3
        <div class="item">Grid 데모</div>
4
        <div class="item">Grid 데모</div>
5
        <div class="item">Grid 데모</div>
6
        <div class="item">Grid 데모</div>
7
        <div class="item">Grid 데모</div>
8
        <div class="item">Grid 데모</div>
9
        <div class="item">Grid 데모</div>
10
        <div class="item">Grid 데모</div>
11
    </div>

효과:

예제 효과 백분율을 사용하여 열 너비, 행 높이 정의

예제:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* 첫 번째 열은 30%, 두 번째 열은 나머지 공간의 2/3, 세 번째 열은 나머지 공간의 1/3 */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* 첫 번째 행은 30%, 두 번째 행은 나머지 공간의 2/3, 세 번째 행은 나머지 공간의 1/3 */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid 데모</div>
3
        <div class="item">Grid 데모</div>
4
        <div class="item">Grid 데모</div>
5
        <div class="item">Grid 데모</div>
6
        <div class="item">Grid 데모</div>
7
        <div class="item">Grid 데모</div>
8
        <div class="item">Grid 데모</div>
9
        <div class="item">Grid 데모</div>
10
        <div class="item">Grid 데모</div>
11
    </div>

효과:

예제 효과 동등 분할(평균 분배) 열 너비, 행 높이

예제:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* 3등분 열, 각 열은 나머지 공간의 1/3 차지 */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* 3등분 행, 각 행은 나머지 공간의 1/3 차지 */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid 데모</div>
3
        <div class="item">Grid 데모</div>
4
        <div class="item">Grid 데모</div>
5
        <div class="item">Grid 데모</div>
6
        <div class="item">Grid 데모</div>
7
        <div class="item">Grid 데모</div>
8
        <div class="item">Grid 데모</div>
9
        <div class="item">Grid 데모</div>
10
        <div class="item">Grid 데모</div>
11
    </div>

효과:

예제 효과 minmax를 사용하여 열, 행의 최소 및 최대 너비, 높이 정의

예제:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* 첫 번째 열 최소 너비 100px, 나머지 공간의 1/3; 두 번째 열 최소 너비 200px, 나머지 공간의 2/3 */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* 첫 번째 행 최소 높이 100px, 나머지 공간의 1/3; 두 번째 행 최소 높이 200px, 나머지 공간의 2/3 */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid 데모</div>
3
        <div class="item">Grid 데모</div>
4
        <div class="item">Grid 데모</div>
5
        <div class="item">Grid 데모</div>
6
    </div>

효과:

예제 효과

그리드 간격

그리드 간격은 grid-row-gap과 grid-column-gap 두 속성으로 제어됩니다. 또한 CSS Grid Level 2에서는 grid-row-gap과 grid-column-gap을 동시에 제어할 수 있는 gap 속성이 도입되었습니다.

예제:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* 행 간격 50px */
6
    grid-column-gap: 30px; /* 열 간격 30px */
7
    /* gap: 50px 30px; 행 간격 50px, 열 간격 30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Grid 데모</div>
3
        <div class="item">Grid 데모</div>
4
        <div class="item">Grid 데모</div>
5
        <div class="item">Grid 데모</div>
6
        <div class="item">Grid 데모</div>
7
        <div class="item">Grid 데모</div>
8
    </div>

효과:

예제 효과

그리드 배치

그리드 배치는 일반적으로 grid-column, grid-row 및 grid-area와 같은 속성을 사용하여 그리드 레이아웃에서 항목을 배치하는 것을 의미합니다. 이러한 속성은 항목이 그리드에서 차지하는 열과 행을 지정하거나 항목이 위치한 영역을 직접 지정하는 데 사용됩니다.

grid-column은 그리드 항목이 차지하는 열을 설정하는 속성입니다. grid-column-start와 grid-column-end의 약식 표기입니다. grid-column을 사용하면 수평 방향에서 그리드 항목의 위치와 차지하는 열 수를 더 편리하게 정의할 수 있습니다.
grid-row는 그리드 항목이 차지하는 행을 설정하는 속성입니다. grid-row-start와 grid-row-end의 약식 표기입니다. grid-row를 사용하면 수직 방향에서 그리드 항목의 위치와 차지하는 행 수를 더 편리하게 정의할 수 있습니다.
grid-area 속성은 grid-row-start, grid-column-start, grid-row-end 및 grid-column-end 속성을 동시에 설정하는 약식 속성입니다. grid-area를 사용하면 그리드 레이아웃에서 그리드 항목의 위치와 크기를 더 직관적으로 정의할 수 있습니다.

예제:

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* 3개의 열 정의, 각 열은 1/3 공간 차지 */
5
    grid-template-rows: repeat(2, 150px);
6
    /* 2개의 행 정의, 각 행 높이는 150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* grid-column과 grid-row를 사용한 배치 */
17
.item1 {
18
    grid-column: 1 / 3; /* 첫 번째 열부터 세 번째 열까지(1+2열) */
19
    grid-row: 1 / 2;    /* 첫 번째 행부터 두 번째 행까지(1행) */
20
}
21
/* grid-area를 사용한 배치 */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* 두 번째 행 두 번째 열부터 세 번째 행 네 번째 열까지(2행)(2+3열) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

효과:

예제 효과

예제:

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* 두 개의 열 정의, 첫 번째 열은 1/3, 두 번째 열은 2/3 차지 */
10
    grid-template-rows: auto;
11
    /* 행 높이 정의, 첫 번째와 세 번째 행 높이는 내용에 따라 결정, 두 번째 행은 나머지 공간 차지 */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* 영역 레이아웃 정의, 각 영역은 문자열로 표시, 공백은 셀 구분, 줄바꿈은 새 행 표시 */
17
    min-height: 100vh;
18
    /* 최소 높이 설정, 내용 높이가 뷰포트보다 작을 때도 footer를 볼 수 있도록 보장 */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* .header를 "header"라는 영역에 배치 */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* .sidebar를 "sidebar"라는 영역에 배치 */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* .main을 "main"이라는 영역에 배치 */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* .footer를 "footer"라는 영역에 배치 */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

효과:

예제 효과

그리드 레이아웃 Grid

기본 개념

일반적인 속성

그리드 레이아웃

그리드 간격

그리드 배치

댓글