[HTML/CSS] 7. Grid Layout

최재원

Mar 11, 2025

Contents

1. Grid의 기본 특징 1. 기본 구조

1. Grid의 기본 특징

❗

격자 레이아웃을 만들 수 있다.


display: grid;

각 숫자는 그리드의 시작 번호이다

1. 기본 구조


.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
}


<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>

부모 요소에 grid 설정

부모 요소에서 자식 요소의 위치 지정 가능

자식 요소의 크기는 부모, 자식 둘 다 설정 가능


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .grid-container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
      .grid-item {
        background-color: #80c6ff;
        padding: 20px;
        border: 1px solid black;
      }
      .item9 {
        grid-column: 1 / 4 span; /* 1번시작 4개 */
      }
    </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 item9">9</div>
    </div>
  </body>
</html>

grid-template-columns : 그리드의 컬럼을 설정한다


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .grid-container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .grid-item {
        background-color: #80c6ff;
        padding: 20px;
        border: 1px solid black;
      }
      .header {
        grid-column: 1/3 span;
        grid-row: 1/1 span;
      }
      .nav {
        grid-column: 1/1 span;
        grid-row: 2/2 span;
      }
      .photo {
        grid-column: 2/2 span;
        grid-row: 2/1 span;
      }
      .section {
        grid-column: 2/3 span;
        grid-row: 3/1 span;
      }
      .aside {
        grid-column: 4/1 span;
        grid-row: 1/2 span;
      }
      .footer {
        grid-column: 1/4 span;
        grid-row: 4/1 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 aside">aside</div>
      <div class="grid-item footer">footer</div>
    </div>
  </body>
</html>

grid-column : 요소의 컬럼에서의 시작 지점과 차지할 공간을 설정한다(세로)

grid-row: 요소의 행에서의 시작 지점과 차지할 공간을 설정한다(가로)

Contents

1. Grid의 기본 특징 1. 기본 구조

1. Grid의 기본 특징

❗

격자 레이아웃을 만들 수 있다.

display: grid;

각 숫자는 그리드의 시작 번호이다

1. 기본 구조

.grid-container { display: grid; grid-template-columns: 1fr 1fr; }

<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> </div>

부모 요소에 grid 설정

부모 요소에서 자식 요소의 위치 지정 가능

자식 요소의 크기는 부모, 자식 둘 다 설정 가능

<!DOCTYPE html> <html lang="en"> <head> <style> .grid-container { background-color: #2196f3; padding: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .grid-item { background-color: #80c6ff; padding: 20px; border: 1px solid black; } .item9 { grid-column: 1 / 4 span; /* 1번시작 4개 */ } </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 item9">9</div> </div> </body> </html>

grid-template-columns : 그리드의 컬럼을 설정한다

<!DOCTYPE html> <html lang="en"> <head> <style> .grid-container { background-color: #2196f3; padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr); } .grid-item { background-color: #80c6ff; padding: 20px; border: 1px solid black; } .header { grid-column: 1/3 span; grid-row: 1/1 span; } .nav { grid-column: 1/1 span; grid-row: 2/2 span; } .photo { grid-column: 2/2 span; grid-row: 2/1 span; } .section { grid-column: 2/3 span; grid-row: 3/1 span; } .aside { grid-column: 4/1 span; grid-row: 1/2 span; } .footer { grid-column: 1/4 span; grid-row: 4/1 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 aside">aside</div> <div class="grid-item footer">footer</div> </div> </body> </html>

grid-column : 요소의 컬럼에서의 시작 지점과 차지할 공간을 설정한다(세로)

grid-row: 요소의 행에서의 시작 지점과 차지할 공간을 설정한다(가로)