[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

<!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>