[HTML/CSS] 6. Grid-Layout

김건우

Mar 13, 2025

Contents

예제 1. 실습

💡

참고 :

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

웹 페이지를 행과 열로 구성할 수 있게 해주는 2차원 레이아웃 시스템

예제 1.

Grid Layout을 이용한 화면 구현 1강

그리드 레이아웃 (CSS)부트스트랩 보다 더 효율적인 반응형 웹을 구현하게 해준다. flex는 컨텐츠를 구...

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


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

실습

네이버 블로그 | 세상에 모든 사물에 인터넷이 연결된다.Grid Layout을 이용한 화면 구현 2강

Grid Layout을 이용한 화면 구현 2강

GridLayout을 이용한 화면 디자인 위에것을 만들기 위한 과정 일단 기본적으로 grid만 잡은 상태에서!!re...


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

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

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

      .nav {
        grid-column: 1/1 span;
        grid-row: 2/2 span;
      }

      .photo {
        grid-column: 2/2 span;
      }

      .section {
        grid-column: 2/3 span;
      }

      .footer {
        grid-column: 1/4 span;
      }

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