[HTML/CSS]7. Grid-Layout

Mar 10, 2025

https://blog.naver.com/codingspecialist/221415672939

https://blog.naver.com/codingspecialist/221415775778


<!DOCTYPE html>
<html lang="ko">
  <head>
    <style>
      .g-box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px 5px;
      }

      .g-box div {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <div class="g-box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .grid-container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
      }

      .grid-item {
        background-color: #90c9f8;
        padding: 20px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <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>


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .grid-container {
        background-color: #2196f3;
        padding: 10px;
      }

      .grid-item {
        background-color: #90c9f8;
        padding: 20px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <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>


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .grid-container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
      }

      .grid-item {
        background-color: #90c9f8;
        padding: 20px;
        border: 1px solid black;
      }

      .header {
        grid-column: 1 / 3 span;
      }

      .footer {
        grid-column: 1 / 3 span;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item header">1</div>
      <div class="grid-item nav">2</div>
      <div class="grid-item section">3</div>
      <div class="grid-item aside">4</div>
      <div class="grid-item footer">5</div>
    </div>
  </body>
</html>

참고

https://www.w3schools.com/css/css_grid.asp

See more posts

[HTML/CSS]7. Grid-Layout

More articles

[HTML/CSS]9. Input 디자인

[HTML/CSS]8. Gridlayout 실습

[HTML/CSS]6. Flex

[HTML/CSS]5. CSS Display