[ CSS3 ] Grid 설명과 예

CSS3

[ CSS3 ] Grid 설명과 예

변쌤(이젠강남) 2024. 12. 13. 15:20

Grid

mdm

바로가기

1. Container 속성

Grid 컨테이너는 부모 요소에 적용되며, 그 내부의 레이아웃을 정의합니다.

속성	설명
display	Grid 레이아웃 활성화 (grid 또는 inline-grid 설정).
grid-template-columns	열의 크기와 개수를 정의.
grid-template-rows	행의 크기와 개수를 정의.
grid-template-areas	Grid의 영역 이름을 정의.
grid-template	grid-template-rows, grid-template-columns, grid-template-areas를 한 번에 설정.
gap (또는 grid-gap)	열과 행 간의 간격 설정.
row-gap	행 간의 간격 설정.
column-gap	열 간의 간격 설정.
justify-items	모든 아이템의 가로 정렬 방식 설정.
align-items	모든 아이템의 세로 정렬 방식 설정.
place-items	justify-items와 align-items를 동시에 설정.
justify-content	Grid 전체의 가로 정렬 방식 설정.
align-content	Grid 전체의 세로 정렬 방식 설정.
place-content	justify-content와 align-content를 동시에 설정.
grid-auto-columns	자동 생성 열의 크기 설정.
grid-auto-rows	자동 생성 행의 크기 설정.
grid-auto-flow	아이템 배치 방향 설정 (row, column, dense).
grid	grid-template, grid-auto-flow, gap 등을 한 번에 설정.

2. Item 속성

Grid 아이템은 컨테이너 내부의 자식 요소에 적용되며, 각 아이템의 위치와 정렬을 정의합니다.

속성	설명
grid-column-start	아이템이 시작할 열 번호를 지정.
grid-column-end	아이템이 끝날 열 번호를 지정.
grid-row-start	아이템이 시작할 행 번호를 지정.
grid-row-end	아이템이 끝날 행 번호를 지정.
grid-column	아이템의 시작 열과 끝 열 번호를 한 번에 설정.
grid-row	아이템의 시작 행과 끝 행 번호를 한 번에 설정.
grid-area	grid-template-areas에서 정의한 영역 이름 또는 위치를 설정.
justify-self	개별 아이템의 가로 정렬 방식 설정.
align-self	개별 아이템의 세로 정렬 방식 설정.
place-self	justify-self와 align-self를 동시에 설정.

# fr

Fractional Unit의 약자로, Grid 레이아웃에서 사용 가능한 공간의 비율을 나눌 때 사용하는 단위입니다.

fr은 유연한 단위로, 고정된 픽셀(px)이나 비율(%)과 달리 남은 공간을 나눠서 배치합니다.
Grid의 여유 공간을 나누는 방식이므로, 다른 고정 크기 요소를 제외하고 남은 공간만 계산합니다.

1. 균등 분할

grid-template-columns: 1fr 1fr 1fr;

3개의 열을 동일한 크기로 나눔.
가용 공간을 3등분하여 각 열이 동일한 비율(1:1:1)로 크기를 가집니다.

2. 비율 기반 분할

grid-template-columns: 2fr 1fr;

첫 번째 열은 두 번째 열보다 2배 넓게 설정.
가용 공간을 3등분하여 2/3은 첫 번째 열, 1/3은 두 번째 열이 차지합니다.

3. 고정 크기와 함께 사용

grid-template-columns: 200px 1fr 2fr;

첫 번째 열은 고정 크기(200px).
두 번째 열과 세 번째 열은 남은 공간을 1:2의 비율로 나눕니다.

4. 반응형 설계

grid-template-columns: repeat(3, 1fr);

3개의 열을 균등하게 배치.
repeat 함수와 fr 단위를 함께 사용하면 가변적인 Grid를 쉽게 설계할 수 있습니다.

원리

전체 크기 계산:
- fr은 고정 크기 요소(픽셀, 퍼센트 등)를 제외한 나머지 가용 공간을 기준으로 계산합니다.
가중치 배분:
- 모든 fr 값의 합을 기준으로 각각의 비율을 계산합니다.

grid-template-columns: 100px 2fr 3fr;

총 너비: 600px (예: 컨테이너의 너비)
남은 공간: 500px (100px 고정 크기를 제외한 나머지)
계산:
- 2fr = (2 / 5) × 500px = 200px
- 3fr = (3 / 5) × 500px = 300px
최종 열 크기:
- 첫 번째 열: 100px (고정 크기)
- 두 번째 열: 200px
- 세 번째 열: 300px

# display

.container {
  display: grid;
  display: grid | inline-grid;
}

1) grid-template-rows / grid-template-columns

행(row)/ 열(column) 의 크기를 정의하는 속성

각 행의 높이를 명시적으로 설정할 수 있으며, 반복적인 행을 생성하거나 반응형 레이아웃을 만들 때 유용합니다.

grid-template-rows: <track-size> ...;
grid-template-columns: <track-size> ...;

<track-size>: 각 행의 크기를 지정합니다. px, %, fr, auto, minmax()와 같은 값들을 사용할 수 있습니다.
여러 값을 공백으로 구분하여 각 행의 높이를 정의합니다.

속성	설명
<track-size>	그리드 트랙(열 또는 행)의 크기를 정의. 고정 크기, 비율(fr), 자동(auto), 또는 유동적 크기(minmax())로 설정.
<line-name>	그리드 라인의 이름을 정의. 특정 라인을 참조하여 그리드 아이템을 배치하거나 스타일을 적용할 때 사용.

<track-size>

<track-size>는 그리드 트랙(열 또는 행)의 크기를 정의합니다. 트랙의 크기는 길이 값, 비율, 또는 가변적인 크기로 지정할 수 있습니다.

값	설명
length	고정된 길이 값 (예: px, em, rem).
percentage	부모 요소 크기의 비율로 설정 (예: 50%).
fr	가용 공간을 비율로 나눔. (fr 단위는 "fraction"을 의미).
auto	콘텐츠 크기에 따라 자동 조정.
minmax()	최소 크기와 최대 크기를 지정하여, 콘텐츠와 가용 공간에 따라 유동적으로 크기 변경.

<line-name>

<line-name>는 그리드 라인의 이름을 정의합니다. 임의의 이름을 지정할 수 있으며, 특정 라인을 참조하여 그리드 아이템을 배치할 때 사용합니다.

<line-name>은 각 그리드 라인(열 또는 행의 경계선)에 적용됩니다.
하나 이상의 이름을 공백으로 구분하여 지정할 수 있습니다.
아이템 배치 시 grid-column 또는 grid-row 속성에서 참조합니다.

grid-template-columns: [line1] 1fr [line2] 2fr [line3];
grid-template-rows: [row1] auto [row2] 200px [row3];

.grid-container {
  display: grid;
  grid-template-columns: [start] 100px [middle] 1fr [end];
  grid-template-rows: [top] auto [bottom];
}

.item {
  grid-column: start / middle; /* 'start'부터 'middle'까지 차지 */
  grid-row: top / bottom; /* 'top'부터 'bottom'까지 차지 */
}

grid-template-columns:
- start → 첫 번째 열의 시작 라인.
- middle → 첫 번째 열의 끝과 두 번째 열의 시작 라인.
- end → 두 번째 열의 끝 라인.
grid-template-rows:
- top → 첫 번째 행의 시작 라인.
- bottom → 두 번째 행의 끝 라인.

1. 고정 크기 행

grid-template-rows: 100px 200px 300px;
grid-template-columns: 100px 200px 300px;

첫 번째 행의 높이: 100px
두 번째 행의 높이: 200px
세 번째 행의 높이: 300px

2. 비율로 설정 (fr 단위)

grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: 1fr 2fr 1fr;

행 간의 높이 비율을 설정:
- 첫 번째 행: 1/4의 높이
- 두 번째 행: 2/4의 높이
- 세 번째 행: 1/4의 높이
fr(fraction) 단위는 가용 공간의 비율로 행 높이를 지정합니다

3. 자동 크기 조정

grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;

각 행의 높이가 콘텐츠 크기에 따라 자동으로 조정

4. 최소 및 최대 크기

grid-template-rows: minmax(100px, 1fr) 200px;
grid-template-columns: minmax(100px, 1fr) 200px;

첫 번째 행:
- 최소 높이: 100px
- 최대 높이: 가용 공간 중 비율(1fr)
두 번째 행: 고정 높이 200px

5. 반복적인 행 생성

grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);

총 3개의 행을 생성하며, 각 행은 동일한 비율(1fr)로 나눕니다.

grid-template-rows: repeat(2, 100px 1fr);
grid-template-columns: repeat(2, 100px 1fr);

100px 고정 높이와 1fr 비율로 구성된 행을 2번 반복.

# grid-template-areas

CSS Grid Layout에서 그리드 아이템의 배치 영역(layout area)을 이름으로 정의하는 데 사용됩니다. 이 속성은 텍스트 기반의 그리드 레이아웃을 직관적으로 설계할 수 있게 해줍니다.

grid-template-areas: 
  "<area-name> <area-name> ..."
  "<area-name> <area-name> ..."
  ...

<area-name>: 각 그리드 영역에 이름을 지정.
- 이름은 반드시 따옴표(" ") 안에 작성.
- .: 비어 있는 공간(아이템이 없는 그리드 셀)을 나타냄.
행은 줄바꿈(\n)으로 구분됩니다.

예)

grid-template-areas: 
  "header header header"
  "menu content content"
  "menu footer footer";

첫 번째 행: header가 3칸(전체 열) 차지.
두 번째 행: menu가 첫 번째 열, content가 나머지 2열 차지.
세 번째 행: menu가 첫 번째 열, footer가 나머지 2열 차지.

<div class="grid-container">
  <div class="header">Header</div>
  <div class="menu">Menu</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "menu content content"
    "menu footer footer";
  grid-template-columns: 1fr 2fr 2fr; /* 3개의 열 */
  grid-template-rows: 100px 200px 100px; /* 3개의 행 */
  gap: 10px; /* 셀 간의 간격 */
  height: 100%;
  width: 100%;
}

/* 각 영역의 위치를 정의 */
.header {
  grid-area: header;
  background-color: orange;
}

.menu {
  grid-area: menu;
  background-color: lightblue;
}

.content {
  grid-area: content;
  background-color: lightgreen;
}

.footer {
  grid-area: footer;
  background-color: lightpink;
}

/* 공통 스타일 */
.grid-container > div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  border: 1px solid black;
}

header header header
menu   content content
menu   footer  footer

첫 번째 행: header가 3열 전체를 차지.
두 번째 행: menu는 첫 번째 열, content는 두 번째와 세 번째 열을 차지.
세 번째 행: menu는 첫 번째 열, footer는 두 번째와 세 번째 열을 차지.

비어 있는 셀 표현 (.)

비어 있는 셀은 ( . ) 으로 표현할 수 있습니다.

grid-template-areas: 
  "header header ."
  "menu content content"
  "menu footer .";

header | header | (빈 칸)
menu   | content | content
menu   | footer  | (빈 칸)

<div class="grid-container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header"
    "content content"
    "footer footer";
  grid-template-columns: repeat(2, 1fr); /* 2개의 동일한 열 */
  grid-template-rows: auto; /* 행 높이는 콘텐츠에 맞게 조정 */
  gap: 10px;
}

row-gap , column-gap , gap

row-gap : 행(row) 간의 간격을 설정하는 속성.
column-gap : 열(column) 간의 간격을 설정하는 속성
gap (단축 속성) : row-gap 과 column-gap을 동시에 설정하는 단축 속성.

row-gap: <length>;

column-gap: <length>;

gap: <row-gap> <column-gap>;

예1)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="css/reset.css" />
        <style>
            body {
                margin: 30px;
            }
            .container {
                width: 500px;
                display: grid;
                grid-template-columns: auto auto auto;
                background-color: skyblue;
                padding: 20px;
            }
            .item {
                background-color: pink;
                border: 3px solid #fff;
                padding: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
    </body>
</html>

예2)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="css/reset.css" />
        <style>
            body {
                margin: 30px;
            }
            .container {
                width: 500px;
                display: grid;
                grid-template: 80px 300px / auto auto 190px;
                background-color: blue;
                padding: 10px;
            }
            .item {
                background-color: pink;
                border: 3px solid #fff;
                padding: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </body>
</html>

예3)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="css/reset.css" />
        <style>
            body {
                margin: 30px;
            }
            .container {
                display: grid;
                grid-template-columns: 200px 500px;
                grid-template-rows: 200px 300px 100px;
                grid-gap: 20px;
            }
            .item {
                background: pink;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">10</div>
        </div>
    </body>
</html>

.container {
  display: grid; /* Grid 레이아웃을 활성화 */
  
  grid-template-columns: 200px 500px; /* 열의 크기 정의
                                        - 첫 번째 열: 너비 200px
                                        - 두 번째 열: 너비 500px */
  
  grid-template-rows: 200px 300px 100px; /* 행의 크기 정의
                                           - 첫 번째 행: 높이 200px
                                           - 두 번째 행: 높이 300px
                                           - 세 번째 행: 높이 100px */
  
  grid-gap: 20px; /* 셀 간의 간격 설정
                    - 열과 열 사이의 간격: 20px
                    - 행과 행 사이의 간격: 20px */
}

예4)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="css/reset.css" />
        <style>
            body {
                margin: 30px;
            }
            .container {
                width: 500px;
                display: grid;
                grid-template-columns: auto auto auto;
                background-color: blue;
                padding: 10px;
            }
            .item {
                background-color: pink;
                border: 3px solid #fff;
                padding: 30px;
                text-align: center;
            }
            .item:nth-child(2) {
                grid-row-start: 2;
                background: hotpink;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
    </body>
</html>

'CSS3' 카테고리의 다른 글

[ CSS ] 반응형, 미디어 쿼리 (0)	2024.05.17
[ CSS3 ] clip-path, outline, calc, object-fit, mask, svg (0)	2024.03.03
[ CSS3 ] gradient / filter (0)	2023.09.06
[ CSS3 ] transform / transition / animation (0)	2023.09.06
[ CSS3 ] position (0)	2023.08.27

현재글[ CSS3 ] Grid 설명과 예

fullstack-study

fullstack 수업진행에 필요한 참고 자료 입니다. ( 보조교재 ) ** 백문이 불여일타! **

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

fullstack-study