CSS Grid Layout

CSS Grid is still an experimental technology - most browsers require a flag to be enabled to make use of this API. Make sure to reference the compatibility table for each property and function for more information.

CSS 그리드 레이아웃은 웹 어플리케이션 개발자를 대상으로 한 디자인 특징을 포함합니다. CSS 그리드는 다양한 레이아웃을 구현하는 데 사용할 수 있습니다. CSS 그리드는 페이지를 주요 영역으로 나누거나 HTML 기본 요소로 만든 컨트롤 사이의 크기, 위치, 레이어로 관계를 정의하는 데 적합합니다.

테이블처럼, 그리드 레이아웃을 사용하면 요소를 행과 열로 정렬할 수 있습니다. 그러나 테이블과 달리, 그리드 레이아웃은컨텐츠 구조가 없어 테이블에서는 불가능한 다양한 레이아웃을 사용할 수 있습니다. 예를 들어, 그리드 컨테이너의 자식 요소는 CSS 포지션 요소처럼 실제로 겹치고 레이어 되도록 위치를 지정할 수 있습니다.

예제

HTML 콘텐츠

<div class="wrapper">
  <div class="box a">a</div>
  <div class="box b">b</div>
  <div class="box c">c</div>
  <div class="box d">d</div>
  <div class="box e">e</div>
  <div class="box f">f</div>
</div>

CSS 콘텐츠

.wrapper { 
  display: grid; 
  grid-template-columns: 100px 100px 100px; 
  grid-gap: 10px; 
  background-color: #fff; 
  color: #444; 
} 

.box { 
  background-color: #444; 
  color: #fff; 
  border-radius: 5px; 
  padding: 20px; 
  font-size: 150%; 
}

참고

CSS 프로퍼티

CSS 함수

스펙문서

Specification Status Comment
CSS Grid Layout Candidate Recommendation Initial definition.

문서 태그 및 공헌자

 이 페이지의 공헌자: techhtml
 최종 변경: techhtml,