Html

011_그리드 레이어

Jan 19, 2024
011_그리드 레이어
Contents

그리드 레이어

  • 2차원의 레이아웃 시스템으로, 웹 페이지 디자인에 유연성을 제공한다.
  • 배치를 할 때 주로 사용한다.
  • 예제 코드
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

코드 예제

  • 예제 1
      • notion image
출력 코드
<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        .grid-container {
            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>

<body>

    <h1>Grid Elements</h1>

    <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 class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>

</body>

</html>
  • 예제 2
      • notion image
출력 코드
<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        .grid-container {
            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* = grid-template-columns: repeat(3, 1fr); */
            grid-column-gap: 10px;
            grid-row-gap: 10px;
						/*grid-gap: 10px 10px; 로 둘다 처리 가능 (세로 가로 순 동일하게 할시 하나만 기입 가능)*/
        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>

<body>

    <h1>Grid Elements</h1>

    <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 class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>

</body>

</html>
  • 예제 3
      • notion image
출력 코드
<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        .grid-container {
            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* grid-column-gap: 10px;
            grid-row-gap: 10px; */
            grid-gap: 10px;
        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
        }

        .g9 {
            color: red;
            grid-column-start: 1; /*grid-column: 1/5; 가 두 줄의 코드와 동일*/
            grid-column-end: 5; /*숫자 뒤에 span을 붙힐 시 숫자가 칸으로 바뀐다*/
        }
    </style>
</head>

<body>

    <h1>Grid Elements</h1>

    <div class="grid-container">
        <div class="grid-item g1">1</div>
        <div class="grid-item g2">2</div>
        <div class="grid-item g3">3</div>
        <div class="grid-item g4">4</div>
        <div class="grid-item g5">5</div>
        <div class="grid-item g6">6</div>
        <div class="grid-item g7">7</div>
        <div class="grid-item g8">8</div>
        <div class="grid-item g9">9</div>
    </div>

</body>

</html>
  • 예제 4
      • notion image
출력 코드
<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <style>
        .grid-container {
            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* grid-column-gap: 10px;
            grid-row-gap: 10px; */
            grid-gap: 10px;
        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
        }

        .g9 {
            color: red;
            grid-column: 1/3;
            grid-row: 1/3;
        }
    </style>
</head>

<body>

    <h1>Grid Elements</h1>

    <div class="grid-container">
        <div class="grid-item g1">1</div>
        <div class="grid-item g2">2</div>
        <div class="grid-item g3">3</div>
        <div class="grid-item g4">4</div>
        <div class="grid-item g5">5</div>
        <div class="grid-item g6">6</div>
        <div class="grid-item g7">7</div>
        <div class="grid-item g8">8</div>
        <div class="grid-item g9">9</div>
    </div>

</body>

</html>
  • 예제 5
      • notion image
출력 코드
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Document</title>
    <style>
        .grid-container {
            background-color: #2196F3;
            padding: 10px;
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            text-align: center;
        }

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
        }

        .g1 {
            grid-column: 1/4;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item g1">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item g1">5</div>
    </div>
</body>

</html>
  • 예제 6
      • notion image
출력 코드
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer-box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            display: grid;
            /*수평 정렬 start, center, end*/
            justify-content: center;
            /*수직 정렬 start, center, end*/
            align-items: center;
        }

        .inner-box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="outer-box">
        <div class="inner-box">1</div>
    </div>
</body>

</html>
  • 예제 7
      • notion image
출력 코드
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer-box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .inner-box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .inner-box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .b1 {
            display: grid;
            align-items: end;
        }

        .b2 {
            display: grid;
            justify-content: end;
        }
    </style>
</head>

<body>
    <div class="outer-box">
        <div class="b1">
            <div class="inner-box1">1</div>
        </div>
        <div class="b2">
            <div class="inner-box2">2</div>
        </div>
    </div>
</body>

</html>
☝
.outer-box>div:nth-child(1) .outer-box div → 모든 div 를 다찾고 .outer-box>div → 바로 아래의 div 만 찾는다. justify-content: ; space-between: 아이템들 사이에 동일한 공간이 생기도록 정렬됩니다. space-around: 아이템들이 주변의 공간을 동일하게 가지도록 정렬됩니다. space-evenly: 아이템들이 컨테이너의 공간을 고르게 분배하도록 정렬됩니다.
 
Share article

More articles

See more posts

063_JDBC 실습(Write 자료)

January 19, 2024
063_JDBC 실습(Write 자료)

012_플렉스

January 19, 2024
012_플렉스

010_배치

January 19, 2024
010_배치

009_포지션

January 19, 2024
009_포지션
RSSPowered by inblog