GRID 레이아웃

•

미리보기

•

개념

•

핵심요소

•

실습예제

•

Quiz

미리보기

Grid 레이아웃을 사용해보면서 쉽게 이해해봅니다.

Layoutit Grid

Layoutit Grid — CSS Grids layouts made easy!

https://grid.layoutit.com/

Layoutit Grid — CSS Grids layouts made easy!

Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually build web layouts with our interactive CSS Grid Generator.

https://grid.layoutit.com/

angrytools css-grid

CSS Grid Layout Generator

https://angrytools.com/css-grid/

CSS Grid Layout Generator

CSS Grid layout generator helps to create grid box container and grid items that adjust its position as per grid rules.

https://angrytools.com/css-grid/

개념

Grid Layout은 격자 레이아웃을 의미하며, 요소들을 2차원으로 배치하는 데 최적화된 방법입니다.

Grid 레이아웃을 사용하면 사이트의 복잡한 구조를 간편하게 구성할 수 있습니다. 예를 들어, 웹 페이지를 여러 구역으로 나누어 배치할 수 있습니다.

Grid 레이아웃 예시 1 - 웹 페이지 레이아웃 예시

•

헤더

•

사이드바

•

콘텐츠 영역

•

푸터

이렇게 4개의 영역을 설정하고, 각 영역의 크기와 위치를 지정할 수 있습니다. 특정 레이아웃을 원할 경우, 다음과 같이 display: grid;와 grid-template-columns 속성을 사용하여 쉽게 설정할 수 있습니다.

예를 들어, 헤더와 푸터는 전체 폭을 차지하고, 사이드바는 왼쪽에, 콘텐츠 영역은 오른쪽에 위치하도록 하고 싶다면, 아래와 같이 CSS를 적용할 수 있습니다:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 사이드바와 콘텐츠 영역 비율 설정 */
  grid-template-rows: auto 1fr auto; /* 헤더, 콘텐츠, 푸터 설정 */
}
CSS
복사

이렇게 하면 복잡한 레이아웃을 쉽게 설정할 수 있습니다. Grid 레이아웃은 다양한 반응형 디자인에도 유용하게 사용됩니다.

Grid 레이아웃 예시 2 - 쇼핑몰 상품 목록

Grid Layout을 사용하여 쇼핑몰 상품 목록을 구성할 수 있습니다. 상품 목록은 여러 상품을 격자 형태로 배치하여 보기 좋게 정렬할 수 있습니다.

예를 들어, 쇼핑몰의 상품 목록 레이아웃은 다음과 같이 구성할 수 있습니다:

•

상품 카드 1

•

상품 카드 2

•

상품 카드 3

•

상품 카드 4

•

상품 카드 5

•

상품 카드 6

이렇게 6개의 상품 카드를 3열로 배치하고 싶다면, display: grid;와 grid-template-columns 속성을 사용하여 쉽게 설정할 수 있습니다.

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열로 배치 */
  gap: 16px; /* 카드 간의 간격 */
}
CSS
복사

<div class="product-list">
  <div class="product-card">상품 카드 1</div>
  <div class="product-card">상품 카드 2</div>
  <div class="product-card">상품 카드 3</div>
  <div class="product-card">상품 카드 4</div>
  <div class="product-card">상품 카드 5</div>
  <div class="product-card">상품 카드 6</div>
</div>
CSS
복사

이렇게 하면 상품 카드가 3열로 정렬되고, 자동으로 높이가 맞춰져서 보기 좋은 상품 목록이 완성됩니다. Grid Layout을 사용하면 다양한 레이아웃을 유연하게 구성할 수 있어 쇼핑몰 디자인에 매우 유용합니다.

핵심 요소

Grid Layout을 적용하는 핵심 요소는 Container와 Item입니다.

•

Grid Container

•

Grid Item

Grid Container

Container는 Item들을 담는 영역으로, 2차원 격자 형태로 요소를 배치할 방향을 정의합니다. 행과 열을 설정하여 각 Item의 크기와 위치를 조정할 수 있습니다.

Grid Container에서는 행과 열의 수, 크기, 간격을 정의하는 속성을 사용하여 복잡한 레이아웃을 쉽게 구성할 수 있습니다. Grid의 강력한 기능을 이해하는 것이 중요합니다.

Grid Item

Container에 담기는 개별 요소들입니다. Item은 개별적으로 크기와 위치를 설정할 수 있으며, 다양한 방식으로 배치할 수 있습니다.

Grid Layout을 사용하면 각 Item을 다양한 방식으로 정렬하고 배치할 수 있어, 복잡한 웹 레이아웃을 쉽게 구현할 수 있습니다.

용어	설명
그리드 컨테이너	그리드 아이템을 포함하는 영역으로, 2차원 레이아웃을 설정하는 역할을 합니다.
그리드 아이템	그리드 컨테이너 내에서 배치되는 개별 요소로, 각각의 크기와 위치를 정의할 수 있습니다.
그리드 번호	그리드의 각 아이템에 부여되는 고유한 번호로, 아이템의 위치를 식별하는 데 사용됩니다.
그리드 라인	그리드의 행과 열을 구분하는 가상의 선으로, 아이템의 배치에 도움을 줍니다.
그리드셀	그리드의 한 칸을 의미하며, 아이템이 위치할 수 있는 기본 단위입니다.
그리드갭	그리드 아이템 간의 간격을 정의하는 속성으로, 행과 열 사이의 공간을 조정합니다.

Grid Container 의 주요 속성

속성	설명
display	그리드 컨테이너(Container)를 정의
grid-template	grid-template-xxx의 단축 속성
grid-template-rows	명시적 행(Track)의 크기를 정의
grid-template-columns	명시적 열(Track)의 크기를 정의
grid-template-areas	영역(Area) 이름을 참조해 템플릿 생성
gap(grid-gap)	xxx-gap의 단축 속성
row-gap (grid-row-gap)	행과 행 사이의 간격(Line)을 정의
column-gap (grid-column-gap)	열과 열 사이의 간격(Line)을 정의

속성	설명
grid-auto-rows	암시적인 행(Track)의 크기를 정의
grid-auto-columns	암시적인 열(Track)의 크기를 정의
grid-auto-flow	자동 배치 알고리즘 방식을 정의
grid	grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content	그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content	그리드 콘텐츠를 수평(행 축) 정렬
place-content	align-content와 justify-content의 단축 속성
align-items	그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items	그리드 아이템들을 수평(행 축) 정렬
place-items	align-items와 justify-items의 단축 속성

fr (fractional unit; 단위 분수;)

분자가 1이고 분모가 양의 정수인 분수

•

남은 공간을 나누어 갖는 비율

fraction

: 분수

display: grid & display: inline-grid

속성값	설명
grid	Block 특성의 Grid Container를 정의
inline-grid	Inline 특성의 Grid Container를 정의

.container {
	display: grid;
}
.container {
	display: inline-grid;
}
CSS
복사

grid-template-rows

라인의 이름과 행의 크기를 지정하는 속성

•

fr (fraction) 단위 사용가능

•

repeat() 함수 사용가능

.container {
  display: grid;
  grid-template-rows: 100px 200px auto; /* 3개의 행을 정의 (1행: 100px, 2행: 200px, 3행: 자동 높이) */
  grid-gap: 16px; /* 아이템 간의 간격 설정 */
}
CSS
복사

<div class="container">
  <div class="item1">아이템 1</div>
  <div class="item2">아이템 2</div>
  <div class="item3">아이템 3</div>
</div>
HTML
복사

grid-template-columns

라인의 이름과 열의 크기를 지정하는 속성

•

fr (fraction) 단위 사용가능

•

repeat() 함수 사용가능

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 2개의 열을 정의 (1열: 1fr, 2열: 2fr) */
  grid-gap: 16px; /* 아이템 간의 간격 설정 */
}
CSS
복사

<div class="container">
  <div class="item1">아이템 1</div>
  <div class="item2">아이템 2</div>
</div>
HTML
복사

grid-template

grid-template-rows, grid-template-columns 를 동시에 지정하는 단축 속성

grid-template-rows grid-template-columns grid-template-areas 단축 속성

•

grid-template-rows, grid-template-columns

.container {
  display: grid;
  grid-template: auto 200px / 1fr 2fr 1fr; /* 행과 열을 동시에 정의 */
  grid-gap: 16px; /* 아이템 간의 간격 설정 */
}
CSS
복사

<div class="container">
  <div class="item1">아이템 1</div>
  <div class="item2">아이템 2</div>
  <div class="item3">아이템 3</div>
  <div class="item4">아이템 4</div>
</div>
HTML
복사

•

grid-template-rows, grid-template-columns, grid-template-areas

.container {
  display: grid;
  grid-template: 
    "header header header" 100px   /* 1행: 헤더 영역, 높이 100px */
    "sidebar content content" 1fr   /* 2행: 사이드바와 콘텐츠 영역 */
    "footer footer footer" 50px;     /* 3행: 푸터 영역, 높이 50px */
  
  grid-template-columns: 200px 1fr 1fr; /* 3개의 열 정의 */
  grid-gap: 16px; /* 아이템 간의 간격 설정 */
}
CSS
복사

<div class="container">
  <div class="header">헤더</div>
  <div class="sidebar">사이드바</div>
  <div class="content">콘텐츠</div>
  <div class="footer">푸터</div>
</div>
HTML
복사

grid-template-areas

더블 클릭!

Grid 레이아웃의 영역을 지정하는 속성

Grid 아이템에서 grid-area 속성을 사용하여, 지정한 항목의 이름을 참조하여 영역을 지정한다.

. 기호를 사용하여 빈 영역을 지정할 수 있다.

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
  
  grid-template-columns: 200px 1fr 1fr; /* 3개의 열 정의 */
  grid-template-rows: 100px 1fr 50px;   /* 3개의 행 정의 */
  grid-gap: 16px; /* 아이템 간의 간격 설정 */
}
CSS
복사

<div class="container">
  <div class="header" style="grid-area: header;">헤더</div>
  <div class="sidebar" style="grid-area: sidebar;">사이드바</div>
  <div class="content" style="grid-area: content;">콘텐츠</div>
  <div class="footer" style="grid-area: footer;">푸터</div>
</div>
HTML
복사

row-gap (grid-row-gap)

Grid 레이아웃에서 행 사이의 간격을 지정하는 속성

default: 0

column-gap (grid-column-gap)

Grid 레이아웃에서 열 사이의 간격을 지정하는 속성

default: 0

gap(grid-gap)

row-gap, column-gap 동시에 지정하는 단축 속성

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3개의 열 정의 */
  grid-template-rows: repeat(2, 100px);  /* 2개의 행 정의 */
  gap: 16px; /* 아이템 간의 간격 설정 */
}
CSS
복사

<div class="container">
  <div class="item1" style="background-color: lightcoral;">아이템 1</div>
  <div class="item2" style="background-color: lightblue;">아이템 2</div>
  <div class="item3" style="background-color: lightgreen;">아이템 3</div>
  <div class="item4" style="background-color: lightyellow;">아이템 4</div>
  <div class="item5" style="background-color: lightpink;">아이템 5</div>
  <div class="item6" style="background-color: lightgray;">아이템 6</div>
</div>
HTML
복사

grid-auto-rows

크기가 설정되지 않은 행의 크기를 지정하는 속성

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3개의 열 정의 */
  grid-auto-rows: 100px; /* 자동으로 생성된 행의 높이를 100px로 설정 */
  gap: 16px; /* 아이템 간의 간격 설정 */
}
CSS
복사

<div class="container">
  <div class="item1" style="background-color: lightcoral;">아이템 1</div>
  <div class="item2" style="background-color: lightblue;">아이템 2</div>
  <div class="item3" style="background-color: lightgreen;">아이템 3</div>
  <div class="item4" style="background-color: lightyellow;">아이템 4</div>
  <div class="item5" style="background-color: lightpink;">아이템 5</div>
  <div class="item6" style="background-color: lightgray;">아이템 6</div>
</div>
HTML
복사

grid-auto-columns

크기가 설정되지 않은 열의 크기를 지정하는 속성

.container {
  display: grid;
  grid-auto-columns: 150px; /* 자동으로 생성된 열의 너비를 150px로 설정 */
  grid-auto-flow: column; /* 열 방향으로 아이템을 추가 */
  gap: 16px; /* 아이템 간의 간격 설정 */
}
CSS
복사

<div class="container">
  <div class="item1" style="background-color: lightcoral;">아이템 1</div>
  <div class="item2" style="background-color: lightblue;">아이템 2</div>
  <div class="item3" style="background-color: lightgreen;">아이템 3</div>
  <div class="item4" style="background-color: lightyellow;">아이템 4</div>
</div>
HTML
복사

grid-auto-flow

크기나 영역을 지정하지 않은 아이템이 그리드에 삽입되는 방식을 지정하는 속성

속성값	의미
row	각 행 축을 따라 차례로 배치 (→ ↓)
column	각 열 축을 따라 차례로 배치 (↓ →)
row dense	행 축을 따라 배치, 앞 선 행의 빈 영역을 채움
column dense	열 축을 따라 배치, 앞 선 열의 빈 영역을 채움

grid

grid-template-xxx과 grid-auto-xxx의 단축 속성

align-content

Grid 컨텐츠의 수직 정렬 방식을 지정하는 속성

속성값	의미
normal	stretch와 같습니다.
start	시작점(위쪽) 정렬
center	수직 가운데 정렬
end	끝점(아래쪽) 정렬
space-around	각 행 위아래에 여백을 고르게 정렬
space-between	첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly	모든 여백을 고르게 정렬
stretch	열 축을 채우기 위해 그리드 콘텐츠를 늘림

justify-content

Grid 컨텐츠의 수평 정렬 방식을 지정하는 속성

속성값	의미
normal	stretch와 같습니다.
start	시작점(왼쪽) 정렬
center	수평 가운데 정렬
end	끝점(오른쪽) 정렬
space-around	각 열 좌우에 여백을 고르게 정렬
space-between	첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly	모든 여백을 고르게 정렬
stretch	행 축을 채우기 위해 그리드 콘텐츠를 늘림

place-content

align-content 와 justify-content 의 단축 속성

align-items

Grid 아이템들의 수직 정렬 방식을 지정하는 속성

속성값	의미
normal	stretch와 같습니다.
start	시작점(위쪽) 정렬
center	수직 가운데 정렬
end	끝점(아래쪽) 정렬
stretch	열 축을 채우기 위해 그리드 아이템을 늘림
normal	stretch와 같습니다.

justify-items

Grid 아이템들의 수평 정렬 방식을 지정하는 속성

속성값	의미
normal	stretch와 같습니다.
start	시작점(왼쪽) 정렬
center	수평 가운데 정렬
end	끝점(오른쪽) 정렬
stretch	행 축을 채우기 위해 그리드 아이템을 늘림

place-items

align-items 와 justify-items 의 단축 속성

Grid Item 의 주요 속성

Grid Container 내부에 담긴 요소들의 개별적인 정렬 및 배치 방법을 지정하는 속성

속성	설명
grid-row-start	그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end	그리드 아이템의 행 끝 위치 지정
grid-row	grid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-column-start	그리드 아이템의 열 시작 위치 지정
grid-column-end	그리드 아이템의 열 끝 위치 지정
grid-column	grid-column-xxx의 단축 속성(열 시작/끝 위치)

속성	설명
grid-area	영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
align-self	단일 그리드 아이템을 수직(열 축) 정렬
justify-self	단일 그리드 아이템을 수평(행 축) 정렬
place-self	align-self와 justify-self의 단축 속성
order	그리드 아이템의 배치 순서를 지정
z-index	아이템이 쌓이는 순서를 지정하는 속성

grid-row

그리드 아이템 수직 라인의 시작/끝 위치를 지정하는 속성

span : 확장할 라인의 개수를 지정하는 키워드

grid-column

그리드 아이템 수평 라인의 시작/끝 위치를 지정하는 속성

span : 확장할 라인의 개수를 지정하는 키워드

grid-area

grid-row와 grid-column의 단축 속성

grid-template-areas가 참조할 영역 이름을 지정하는 속성

align-self

단일 그리드 아이템(Item)을 수직(열 축) 정렬하는 속성

속성값	설명
normal	(=stretch)
start	시작점(위쪽) 정렬
center	수직 가운데 정렬
end	끝점(아래쪽) 정렬
stretch	열 축을 채우기 위해 그리드 아이템을 늘림

justify-self

단일 그리드 아이템(Item)을 수평(행 축) 정렬하는 속성

속성값	설명
normal	stretch와 같습니다.
start	시작점(왼쪽) 정렬
center	수평 가운데 정렬
end	끝점(오른쪽) 정렬
stretch	행 축을 채우기 위해 그리드 아이템을 늘림

place-self

align-self와 justify-self의 단축 속성

속성	설명
normal	stretch와 같습니다.
start	시작점(왼쪽) 정렬
center	수평 가운데 정렬
end	끝점(오른쪽) 정렬
stretch	행 축을 채우기 위해 그리드 아이템을 늘림

order

그리드 아이템이 자동 배치되는 순서를 지정하는 속성

z-index

아이템이 쌓이는 순서를 지정하는 속성

실습예제

Grid Conrainer

Grid Item

Grid Conrainer

•

HTML

•

CSS

•

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid</title>
    <link rel="stylesheet" href="css/grid.css">
</head>
<body>
    <div class="container">

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

        <!-- grid-template-rows -->
        <h2>grid-template-rows: 100px 200px 300px;</h2>
        <div class="grid-container rows-px">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h2>grid-template-rows: 1fr 2fr 1fr;</h2>
        <div class="grid-container rows-fr">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h2>grid-template-rows: 1fr 2fr 100px;</h2>
        <div class="grid-container rows-mix">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h2>grid-template-rows: [row1] 100px;</h2>
        <div class="grid-container rows-name">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h2>grid-template-rows: repeat(3, 200px)</h2>
        <div class="grid-container rows-repeat">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        
        <!-- grid-template-columns -->
        <h2>grid-template-columns: 100px 200px 300px;</h2>
        <div class="grid-container columns-px">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h2>grid-template-columns: 1fr 2fr 1fr;</h2>
        <div class="grid-container columns-fr">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h2>grid-template-columns: 1fr 2fr 100px;</h2>
        <div class="grid-container columns-mix">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h2>grid-template-columns: [row1] 100px;</h2>
        <div class="grid-container columns-name">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

        <h2>grid-template-columns: repeat(3, 200px)</h2>
        <div class="grid-container columns-repeat">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>


        <!-- grid-template-areas -->
        <h2>grid-template-areas</h2>
        <div class="grid-container grid-template-areas">
            <div class="item grid-header">HEADER</div>
            <div class="item grid-aside">ASIDE</div>
            <div class="item grid-main">MAIN</div>
            <div class="item grid-footer">FOOTER</div>
        </div>
        
        <!-- grid-template -->
        <h2>grid-template</h2>
        <div class="grid-container grid-template">
            <div class="item grid-header">HEADER</div>
            <!-- <div class="item grid-aside">ASIDE</div> -->
            <div class="item grid-main">MAIN</div>
            <div class="item grid-footer">FOOTER</div>
        </div>


        <!-- row-gap -->
        <h2>row-gap</h2>
        <div class="grid-container grid-template row-gap">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>
        
        <!-- column-gap -->
        <h2>column-gap</h2>
        <div class="grid-container grid-template column-gap">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <!-- gap -->
        <h2>gap</h2>
        <div class="grid-container grid-template gap">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <!-- grid-auto-rows -->
        <h2>grid-auto-rows</h2>
        <div class="grid-container rows-repeat columns-repeat auto-rows">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item auto-item">+</div>
            <div class="item auto-item">+</div>
            <div class="item auto-item">+</div>
            <div class="item auto-item">+</div>
            <div class="item auto-item">+</div>
            <div class="item auto-item">+</div>
        </div>
        
        <!-- grid-auto-columns -->
        <h2>grid-auto-columns</h2>
        <div class="grid-container rows-repeat columns-repeat auto-columns">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item auto-item">+</div>
            <div class="item auto-item">+</div>
            <div class="item auto-item">+</div>
            <div class="item auto-item">+</div>
            <div class="item auto-item">+</div>
        </div>


        <!-- grid-auto-flow -->
        <h2>grid-auto-flow : row;</h2>
        <div class="grid-container rows-repeat columns-repeat auto-flow-row">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item auto-item">+1</div>
            <div class="item auto-item">+2</div>
            <div class="item auto-item">+3</div>
            <div class="item auto-item">+4</div>
            <div class="item auto-item">+5</div>
            <div class="item auto-item">+6</div>
        </div>
        
        <!-- grid-auto-flow -->
        <h2>grid-auto-flow : column;</h2>
        <div class="grid-container rows-repeat columns-repeat auto-flow-column">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item auto-item">+1</div>
            <div class="item auto-item">+2</div>
            <div class="item auto-item">+3</div>
            <div class="item auto-item">+4</div>
            <div class="item auto-item">+5</div>
            <div class="item auto-item">+6</div>
        </div>

        <!-- grid -->
        <!-- grid : grid-template-rows / grid-template-columns  -->
        <h2>grid : grid-template-rows / grid-template-columns</h2>
        <div class="grid-container grid-rows-columns">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>

        <h2>grid : grid-template</h2>
        <div class="grid-container grid-grid-template">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <!-- align-content -->
        <h2>align-content : start;</h2>
        <div class="grid-container rows-repeat columns-repeat align align-start">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <h2>align-content : end;</h2>
        <div class="grid-container rows-repeat columns-repeat align align-end">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <h2>align-content : center;</h2>
        <div class="grid-container rows-repeat columns-repeat align align-center">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>


        <h2>align-content : space-between;</h2>
        <div class="grid-container rows-repeat columns-repeat align align-between">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <h2>align-content : space-around;</h2>
        <div class="grid-container rows-repeat columns-repeat align align-around">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <h2>align-content : space-evenly;</h2>
        <div class="grid-container rows-repeat columns-repeat align align-evenly">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">+</div>
            <div class="item">+</div>
            <div class="item">+</div>
        </div>

        <h2>align-content : stretch;</h2>
        <div class="grid-container rows-repeat columns-repeat align align-stretch">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">stretch</div>
            <div class="item">stretch</div>
            <div class="item">stretch</div>
        </div>


        <!-- justify-content -->
        <h2>justify-content : start;</h2>
        <div class="grid-container rows-repeat columns-repeat justify justify-start">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <h2>justify-content : end;</h2>
        <div class="grid-container rows-repeat columns-repeat justify justify-end">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <h2>justify-content : center;</h2>
        <div class="grid-container rows-repeat columns-repeat justify justify-center">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <h2>justify-content : space-between;</h2>
        <div class="grid-container rows-repeat columns-repeat justify justify-between">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <h2>justify-content : space-around;</h2>
        <div class="grid-container rows-repeat columns-repeat justify justify-around">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <h2>justify-content : space-evenly;</h2>
        <div class="grid-container rows-repeat columns-repeat justify justify-evenly">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">+</div>
            <div class="item">+</div>
            <div class="item">+</div>
        </div>

        <h2>justify-content : stretch;</h2>
        <div class="grid-container rows-repeat columns-repeat justify justify-stretch">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
            <div class="item">stretch</div>
            <div class="item">stretch</div>
            <div class="item">stretch</div>
        </div>

        <!-- place-content -->
        <h2>place-content: center center;</h2>
        <div class="grid-container rows-repeat columns-repeat place place-center-center">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
            <div class="item">9</div>
        </div>

        <!-- align-items -->
        <h2>align-items: start;</h2>
        <div class="grid-container rows-repeat columns-repeat align-items-start">
            <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items">4</div>
            <div class="items">5</div>
            <div class="items">6</div>
            <div class="items">7</div>
            <div class="items">8</div>
            <div class="items">9</div>
        </div>
        
        <h2>align-items: end;</h2>
        <div class="grid-container rows-repeat columns-repeat align-items-end">
            <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items">4</div>
            <div class="items">5</div>
            <div class="items">6</div>
            <div class="items">7</div>
            <div class="items">8</div>
            <div class="items">9</div>
        </div>
        
        <h2>align-items: center;</h2>
        <div class="grid-container rows-repeat columns-repeat align-items-center">
            <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items">4</div>
            <div class="items">5</div>
            <div class="items">6</div>
            <div class="items">7</div>
            <div class="items">8</div>
            <div class="items">9</div>
        </div>
        
        <h2>align-items: stretch;</h2>
        <div class="grid-container rows-repeat columns-repeat align-items-stretch">
            <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items">4</div>
            <div class="items">5</div>
            <div class="items">6</div>
            <div class="items">7</div>
            <div class="items">8</div>
            <div class="items">9</div>
        </div>


        <!-- justify-items -->
        <h2>justify-items: start;</h2>
        <div class="grid-container rows-repeat columns-repeat justify-items-start">
            <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items">4</div>
            <div class="items">5</div>
            <div class="items">6</div>
            <div class="items">7</div>
            <div class="items">8</div>
            <div class="items">9</div>
        </div>
        
        <h2>justify-items: end;</h2>
        <div class="grid-container rows-repeat columns-repeat justify-items-end">
            <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items">4</div>
            <div class="items">5</div>
            <div class="items">6</div>
            <div class="items">7</div>
            <div class="items">8</div>
            <div class="items">9</div>
        </div>
        
        <h2>justify-items: center;</h2>
        <div class="grid-container rows-repeat columns-repeat justify-items-center">
            <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items">4</div>
            <div class="items">5</div>
            <div class="items">6</div>
            <div class="items">7</div>
            <div class="items">8</div>
            <div class="items">9</div>
        </div>
        
        <h2>justify-items: stretch;</h2>
        <div class="grid-container rows-repeat columns-repeat justify-items-stretch">
            <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items">4</div>
            <div class="items">5</div>
            <div class="items">6</div>
            <div class="items">7</div>
            <div class="items">8</div>
            <div class="items">9</div>
        </div>

        <!-- place-items : center center -->
        <h2>place-items: center center;</h2>
        <div class="grid-container rows-repeat columns-repeat place-items-center">
            <div class="items">1</div>
            <div class="items">2</div>
            <div class="items">3</div>
            <div class="items">4</div>
            <div class="items">5</div>
            <div class="items">6</div>
            <div class="items">7</div>
            <div class="items">8</div>
            <div class="items">9</div>
        </div>
        
    </div>
</body>
</html>
HTML
복사

•

CSS

.container {
    width: 1200px;
    margin: 0 auto;
    border: 3px dashed hotpink;
    margin-bottom: 500px;
    padding-bottom: 500px;
}

/* grid */
.grid-container {
    display: grid;
    border: 1px solid lightcoral;
}

.item {
    width: calc(100%-20px);
    height: calc(100%-20px);
    margin: 20px;
    padding: 20px;
    font-size: 30px;
    text-align: center;
    line-height: 1;
    background-color: cornflowerblue;
    color: white;
    box-sizing: border-box;
}


/* grid-template-rows */
.rows-px { grid-template-rows: 100px 200px 300px;}
.rows-fr { grid-template-rows: 1fr 2fr 1fr;}
.rows-mix { grid-template-rows: 1fr 2fr 100px;}
.rows-name { grid-template-rows: [row1] 100px [row2] 150px [row3] 200px;}
.rows-repeat { grid-template-rows: repeat(3, 200px); }


/* grid-template-columns */
.columns-px { grid-template-columns: 100px 200px 300px;}
.columns-fr { grid-template-columns: 1fr 2fr 1fr;}
.columns-mix { grid-template-columns: 1fr 2fr 100px;}
.columns-name { grid-template-columns: [row1] 100px [row2] 150px [row3] 200px;}
.columns-repeat { grid-template-columns: repeat(3, 200px); }


/* grid-template-areas */

/* grid-area : 영역의 이름을 지정하는 속성 */
.grid-header { grid-area: header; }
.grid-aside { grid-area: aside; }
.grid-main { grid-area: main; }
.grid-footer { grid-area: footer; }

.grid-template-areas {
    grid-template-areas: 
        "header header header"
        "aside main main"
        "footer footer footer";
}

/* grid-template */
.grid-template {
    grid-template: 
        "header header header" 100px
        "main main main" 200px
        "footer footer footer" 150px
        / 100px 200px 300px
    ;
}

/* gap */
.row-gap { row-gap: 100px; }
.column-gap { column-gap: 200px; }
.gap { gap: 100px 200px; }

/* auto */
.auto-rows { grid-auto-rows: 300px; }
.auto-columns { grid-auto-columns: 300px; }
.auto-item { background-color: mediumslateblue; }


/* grid column */
/* 3n-2 : 1, 4, 7, ... */
/* 3n-1 : 2, 5, 8, ... */
/* 3n   : 3, 6, 9, ... */
.auto-columns .item:nth-child(3n-2) { grid-column: 1/2; }
.auto-columns .item:nth-child(3n-1) { grid-column: 2/3; }
.auto-columns .item:nth-child(3) { grid-column: 3/4; }

.auto-columns .auto-item:nth-child(3n-2) { grid-column: 4/5; grid-row: 1/2; }
.auto-columns .auto-item:nth-child(3n-1) { grid-column: 4/5; grid-row: 2/3;  }
.auto-columns .auto-item:nth-child(3) { grid-column: 4/5; grid-row: 3/4; }

/* grid-auto-flow */
.auto-flow-row { grid-auto-flow: row; }
.auto-flow-column { grid-auto-flow: column; }


/* grid */
/* [grid-template-rows] [grid-template-column] */
.grid-rows-columns {
    grid: 100px 200px / 1fr 3fr;
    /* grid-template-rows: 100px 200px; */
    /* grid-template-columns: 1fr 3fr; */
}

.grid-grid-template {
    grid:
        "header header header" 100px
        "main main main" 200px
        "footer footer footer" 150px
        / 200px 300px 400px;
}

/* align-content */
.align { height: 1000px; }
.align-start { align-content: start; }
.align-end { align-content: end; }
.align-center { align-content: center; }
.align-between { align-content: space-between; }
.align-around { align-content: space-around; }
.align-evenly { align-content: space-evenly; }
.align-stretch { align-content: stretch; }

/* justify-content */
.justify { grid-auto-flow: column; }
.justify-start { justify-content: start; }
.justify-end { justify-content: end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.justify-stretch { justify-content: stretch; }


/* place-content */
.place { height: 1000px; }
.place-center-center {
    place-content: center center;
    /* align-content    justify-content */
    /* 컨텐츠 수직정렬   컨텐츠 수평정렬 */
}


/* items */
.items {
    width: 50px;
    height: 50px;
    margin: 20px;
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    background-color: cornflowerblue;
    color: white;
    box-sizing: border-box;
}

/* align-items */
.align-items-start { align-items: start; }
.align-items-end { align-items: end; }
.align-items-center { align-items: center; }
.align-items-stretch { align-items: stretch; }
.align-items-stretch .items { height: auto; }



/* justify-items */
.justify-items-start { justify-items: start; }
.justify-items-end { justify-items: end; }
.justify-items-center { justify-items: center; }
.justify-items-stretch { justify-items: stretch; }
.justify-items-stretch .items { width: auto; }


/* place-items */
.place-items-center {
    place-items: center center;
    /* align-items      justify-items */
    /* 아이템 수직정렬    아이템 수평정렬 */
}
CSS
복사

Grid Item

•

HTML

•

CSS

•

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Item</title>
    <link rel="stylesheet" href="css/grid-item.css">
</head>
<body>
    <div class="container">

        <h2>grid-row</h2>
        <div class="grid-container grid-row">
            <div class="item item1">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
        </div>

        <h2>grid-column</h2>
        <div class="grid-container grid-column">
            <div class="item item1">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
        </div>

        <h2>grid-area</h2>
        <div class="grid-container grid-area">
            <div class="item item1">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>

        <h2>grid-area-name</h2>
        <div class="grid-container grid-area-name">
            <div class="item header">header</div>
            <div class="item aside">aside</div>
            <div class="item main">main</div>
            <div class="item footer">footer</div>
        </div>

        <h2>align-self</h2>
        <div class="grid-container align-self">
            <div class="item align-start"></div>
            <div class="item align-center"></div>
            <div class="item align-end"></div>
            <div class="item align-stretch"></div>
        </div>

        <h2>justify-self</h2>
        <div class="grid-container justify-self">
            <div class="item justify-start"></div>
            <div class="item justify-center"></div>
            <div class="item justify-end"></div>
            <div class="item justify-stretch"></div>
        </div>

        <h2>place-self</h2>
        <div class="grid-container place-self">
            <div class="item place-center"></div>
        </div>

        <h2>order</h2>
        <div class="grid-container order">
            <div class="item order5">1</div>
            <div class="item order3">2</div>
            <div class="item order-1">3</div>
            <div class="item order2">4</div>
            <div class="item order1">5</div>
        </div>

        <h2>z-index</h2>
        <div class="grid-container z-index">
            <div class="item z-index">1</div>
            <div class="item z-index">2</div>
            <div class="item z-index">3</div>
        </div>

    </div>
</body>
</html>
HTML
복사

•

CSS

.container {
    width: 1200px;
    margin: 0 auto;
    border: 3px dashed coral;
    margin-bottom: 500px;
    padding-bottom: 500px;
}

.grid-container {
    display: grid;
    border: 1px solid lightcoral;
}

.item {
    width: calc(100%-20px);
    height: calc(100%-20px);
    margin: 20px;
    padding: 20px;
    font-size: 30px;
    text-align: center;
    background-color: cornflowerblue;
    color: white;
    box-sizing: border-box;
}

.grid-row {
    grid-template-columns: auto auto auto auto;
    gap: 10px;
    padding: 10px;
}

/* item 속성 : grid-row */
.grid-row .item1 {
    grid-row: 1 / span 2;   /* span : 확장할 라인 개수 지정 */
    /* grid-row: 1 / 3; */   /* 단축속성 : grid-row-start / grid-row-end */
    /* grid-row-start: 1; */ /* 개별속성 */
    /* grid-row-end: 3; */   /* 개별속성 */
}


.grid-column {
    grid-template-columns: auto auto auto auto;
    gap: 10px;
    padding: 10px;
}

/* item 속성 : grid-column */
.grid-column .item1 {
    grid-column: 1 / span 2;   /* span : 확장할 라인 개수 지정 */
    /* grid-column: 1 / 3; */   /* 단축속성 : grid-column-start / grid-column-end */
    /* grid-column-start: 1; */ /* 개별속성 */
    /* grid-column-end: 3; */   /* 개별속성 */
}


.grid-area {
    grid-template-columns: repeat(4, auto);
    gap: 10px;
    padding: 10px;
}


/* item 속성 : grid-area 
    - (grid-row, grid-column 단축)
*/
.grid-area .item1 {
    /* row-start / column-start / row-end / column-end */
    grid-area: 1 / 1 / 3 / 3;
    /* 
        grid-row : 1 / 3;
            grid-row-start : 1;
            grid-row-end : 3;
        grid-column : 1 / 3;
            grid-column-start : 1;
            grid-column-end : 3;
    */
}

/* item 속성 : grid-area - 영역이름 지정 */
.grid-area-name .header { grid-area: header; }
.grid-area-name .aside { grid-area: aside; }
.grid-area-name .main { grid-area: main; }
.grid-area-name .footer { grid-area: footer; }

.grid-area-name {
    grid-template-areas:
        /* 배치될 Grid 아이템의 영역이름 지정 */
        /* 1열  2열     3열     4열 */
        'header header header header'       /* 1행 */
        'aside  aside  main   main'         /* 2행 */
        'footer footer footer footer'       /* 3행 */
        ;
}

/* item 속성 - align-self */
.align-self {
    grid-template-columns: auto auto;
    grid-template-rows: 200px 200px;
}

.align-self .item {
    width: 50px;
    height: 50px;
    padding: 5px;
}

.align-self .align-start { align-self: start;}
.align-self .align-center { align-self: center;}
.align-self .align-end { align-self: end;}
.align-self .align-stretch { align-self: stretch; height: auto;}



/* item 속성 - justify-self */
.justify-self {
    grid-template-columns: auto auto;
    grid-template-rows: 200px 200px;
}

.justify-self .item {
    width: 50px;
    height: 50px;
    padding: 5px;
}

.justify-self .justify-start { justify-self: start; }
.justify-self .justify-center { justify-self: center; }
.justify-self .justify-end { justify-self: end; }
.justify-self .justify-stretch { justify-self: stretch; width: auto; }




/* item 속성 - place-self */
.place-self {
    grid-template-columns: auto ;
    grid-template-rows: 300px ;
}

.place-self .item {
    width: 50px;
    height: 50px;
    padding: 5px;
}

.place-self .place-center {
    place-self: center center;
    /* align-self justify-self */
}


.order {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);
}

.order .order-1 { order: -1;}
.order .order1 { order: 1;}
.order .order2 { order: 2;}
.order .order3 { order: 3;}
.order .order5 { order: 5;}

.z-index {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);
}

.z-index .item:nth-child(1) {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    z-index: 2;
}

.z-index .item:nth-child(2) {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    background-color: lightcoral;
    z-index: 1;
}

.z-index .item:nth-child(3) {
    grid-row: 2 / 3;
    grid-column: 2 / 4;
    background-color: mediumseagreen;
}
CSS
복사

Quiz

“아전인수”. “제 논의 물대기” 라는 말을 아시나요? 당근에 물주기를 해보겠습니다.

Grid Garden

https://cssgridgarden.com/#ko

Grid Garden

A game for learning CSS grid layout

https://cssgridgarden.com/#ko

Flex & Grid

FLEX 레이아웃

•

미리보기

•

개념

•

핵심요소

•

실습예제

•

Quiz

미리보기

CSS Flex Layout

https://angrytools.com/css-flex/

FLEX 레이아웃