본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/CSS

[CSS] 그리드 레이아웃

그리드 레이아웃

CSS에서 레이아웃을 작성하기 위한 새로운 속성입니다.


그리드 레이아웃

Grid 속성
속성 설명
grid grid 속성은 그리드 레이아웃을 정의합니다.
grid-area grid-area
grid-auto-columns grid-auto-columns는 열의 크기를 설정합니다.
grid-auto-flow grid-auto-flow는 자동 배치 방식을 설정합니다.
grid-auto-rows grid-auto-rows는 행의 크기를 설정합니다.
grid-column grid-column
grid-column-end grid-column-end
grid-column-gap grid-column-gap
grid-column-start grid-column-start
grid-gap grid-gap
grid-row grid-row는 그리드 아이템의 단축 속성을 설정합니다.
grid-row-end grid-row-end는 그리드 아이템 행의 끝 위치를 설정합니다.
grid-row-gap grid-row-gap는 그리드 아이템 행의 간격을 설정합니다.
grid-row-start grid-row-start는 그리드 아이템 행의 시작 위치를 설정합니다.
grid-template grid-template
grid-template-areas grid-template-areas
grid-template-columns grid-template-columns은 열의 크기를 설정합니다.
grid-template-rows grid-template-rows

Sample1

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid1 {
            display: grid; 
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            /* grid-template-columns: 50px 50px 1fr 1fr 1fr 1fr 1fr 1fr; */
            /* grid-template-columns: repeat(8, 50px); */
            /* grid-template-columns: repeat(8, 1fr); */
            /* grid-template-columns: repeat(auto-fill, 50px); */
            /* grid-template-columns: 200px repeat(auto-fill, 100px) 300px; */
            grid-gap: 2%;
        }
    </style>
</head>
<body>
    <div class="grid grid1">
        <div class="column column1"></div>
        <div class="column column1"></div>
        <div class="column column1"></div>
        <div class="column column1"></div>
        <div class="column column1"></div>
        <div class="column column1"></div>
        <div class="column column1"></div>
        <div class="column column1"></div>
    </div>
</body>
</html>

Sample2

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid2 {
            display: grid; 
            /* grid-template-columns: 50px 50px 50px 150px 50px 50px 50px 50px; */
            grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr;
            grid-gap: 2%;
        }
    </style>
</head>
<body>
    <div class="grid grid2">
        <div class="column column2"></div>
        <div class="column column2"></div>
        <div class="column column2"></div>
        <div class="column column2"></div>
        <div class="column column2"></div>
        <div class="column column2"></div>
        <div class="column column2"></div>
        <div class="column column2"></div>
    </div>
</body>
</html>

Sample3

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid3 {
            display: grid; 
            grid-template-columns: repeat(8, 1fr);
            grid-gap: 2%;
        }
        .column3:last-child {
            /* grid-column-start: 1; */
            /* grid-column-end: 9; */
            grid-column: span 1 / 9;
        }
    </style>
</head>
<body>
    <div class="grid grid3">
        <div class="column column3"></div>
        <div class="column column3"></div>
        <div class="column column3"></div>
        <div class="column column3"></div>
    </div>
</body>
</html>

Sample4

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid4 {
            display: grid; 
            grid-template-columns: repeat(8, 1fr);
            grid-gap: 2%;
        }
        .column4:first-child {
            grid-column: span 1 / 6;
        }
    </style>
</head>
<body>
    <div class="grid grid4">
        <div class="column column4"></div>
        <div class="column column4"></div>
        <div class="column column4"></div>
        <div class="column column4"></div>
    </div>
</body>
</html>

Sample5

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid5 {
            display: grid; 
            grid-template-columns: repeat(8, 1fr);
            grid-gap: 2%;
        }
        .column5:nth-child(2) {
            grid-column: 2 / 4;
        }
        .column5:nth-child(3) {
            grid-column: 4 / 6;
        }
        .column5:last-child {
            grid-column: 8 / 9;
        }
    </style>
</head>
<body>
    <div class="grid grid5">
        <div class="column column5"></div>
        <div class="column column5"></div>
        <div class="column column5"></div>
        <div class="column column5"></div>
    </div>
</body>
</html>

Sample6

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid6 {
            display: grid; 
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
        }
        .column6:nth-child(3) {grid-column: 1 / 3;}
    </style>
</head>
<body>
    <div class="grid grid6">
        <div class="column column6"></div>
        <div class="column column6"></div>
        <div class="column column6"></div>
        <div class="column column6"></div>
        <div class="column column6"></div>
    </div>
</body>
</html>

Sample7

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid7 {
            display: grid; 
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-gap: 20px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="grid grid7">
        <div class="column column7"></div>
        <div class="column column7"></div>
        <div class="column column7"></div>
        <div class="column column7"></div>
        <div class="column column7"></div>
        <div class="column column7"></div>
        <div class="column column7"></div>
        <div class="column column7"></div>
        <div class="column column7"></div>
    </div>
</body>
</html>

Sample8

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid8 {
            display: grid; 
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            grid-gap: 20px;
        }
    </style>
</head>
<body>
    <div class="grid grid8">
        <div class="column column8"></div>
        <div class="column column8"></div>
        <div class="column column8"></div>
        <div class="column column8"></div>
        <div class="column column8"></div>
        <div class="column column8"></div>
        <div class="column column8"></div>
        <div class="column column8"></div>
        <div class="column column8"></div>
    </div>
</body>
</html>

Sample9

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid9 {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-gap: 20px;
        }
        .column9:nth-child(1) {
            grid-column: span 2;
            grid-row: span 2;
        }
        .column9:nth-child(3) {
            grid-column: span 2;
            grid-row: span 2;
        }
        .column9:last-child {
            grid-column: span 5 / 6;
        }
    </style>
</head>
<body>
    <div class="grid grid9">
        <div class="column column9"></div>
        <div class="column column9"></div>
        <div class="column column9"></div>
        <div class="column column9"></div>
        <div class="column column9"></div>
        <div class="column column9"></div>
        <div class="column column9"></div>
        <div class="column column9"></div>
        <div class="column column9"></div>
        <div class="column column9"></div>
    </div>
</body>
</html>

Sample10

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid10 {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(3, 1fr);
            /* grid-template-rows: repeat(3, 100px); */
            grid-template-rows: repeat(3, minmax(100px, auto));
            grid-template-areas:
                "a a a"
                "b c c"
                "b c c"
                "d d d";
        } 
        .column10:nth-child(1) {grid-area: a;}
        .column10:nth-child(2) {grid-area: b;}
        .column10:nth-child(3) {grid-area: c;}
        .column10:nth-child(4) {grid-area: d;}
    </style>
</head>
<body>
    <div class="grid grid10">
        <div class="column column10"></div>
        <div class="column column10"></div>
        <div class="column column10"></div>
        <div class="column column10"></div>
    </div>
</body>
</html>

Sample11

콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.

결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        /* option */
        .grid {
            background-color: #f7f7f7;
            border-radius: 3px;
            padding: 20px;
            counter-reset: items;
        }
        .column {
            border-radius: 3px;
            background-color: #A2CBFA;
            border: 1px solid #4390E1;
            box-sizing: border-box;
            box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
            min-height: 100px; 
            color: #fff;
            padding: 10px;
        }
        .column::before {
            counter-increment: items;
            content: counter(items);
        }
        /* grid */
        .grid11 {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(auto-fit, 150px);
            grid-auto-rows: 150px;
            grid-auto-flow: dense;
        } 
        .column11:nth-of-type(2) {
            grid-column: span 2;
        }
        .column11:nth-of-type(5) {
            grid-column: span 2;
            grid-row: span 2;
        }
        .column11:nth-of-type(7) {
            grid-row: span 2;
        }
    </style>
</head>
<body>
    <div class="grid grid11">
        <div class="column column11"></div>
        <div class="column column11"></div>
        <div class="column column11"></div>
        <div class="column column11"></div>
        <div class="column column11"></div>
        <div class="column column11"></div>
        <div class="column column11"></div>
        <div class="column column11"></div>
        <div class="column column11"></div>
        <div class="column column11"></div>
    </div>
</body>
</html>

AD

comments