CSS 8일차 overflow/플렉스 박스 레이아웃(Flexbox)/그리드 레이아웃

---

7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기

1. 플렉스 박스 레이아웃 개요

플렉스 박스(Flexbox)란

• 1차원 레이아웃을 설계하기 위한 CSS 레이아웃 방식
• 한 방향(가로 또는 세로)으로 요소를 정렬하고 배치하는 데 최적화됨

---

플렉스 박스의 구성 요소

• 주축 (main axis)
  플렉스 아이템이 배치되는 기본 진행 방향의 축
• 교차축 (cross axis)
  주축과 수직인 방향의 축
• 플렉스 컨테이너 (flex container)
  display: flex 또는 display: inline-flex가 적용된 부모 요소
• 플렉스 아이템 (flex item)
  플렉스 컨테이너의 직계 자식 요소

---

레이아웃 확인 방법

• 브라우저 개발자 도구
  Elements 탭 → flex 아이콘 클릭 → 축 방향 및 정렬 상태 시각적으로 확인 가능

---

2. 플렉스 박스 레이아웃의 기본 속성

2-1. display 속성

• 요소를 플렉스 컨테이너로 지정

형식

display: flex;
display: inline-flex;

• flex : 블록 레벨 플렉스 컨테이너
• inline-flex : 인라인 레벨 플렉스 컨테이너

---

2-2. flex-direction

• 주축의 방향을 지정

형식

flex-direction: <속성값>;

속성값

• row : 왼쪽 → 오른쪽 (기본값)
• row-reverse : 오른쪽 → 왼쪽
• column : 위 → 아래
• column-reverse : 아래 → 위

---

2-3. flex-wrap

• 플렉스 아이템의 줄 바꿈 여부 지정

형식

flex-wrap: <속성값>;

속성값

• nowrap : 줄 바꿈 없음 (기본값)
• wrap : 컨테이너를 벗어나면 줄 바꿈
• wrap-reverse : 줄 바꿈하되 교차축 방향 반대로 배치

---

2-4. flex-flow (단축 속성)

• flex-direction과 flex-wrap을 한 번에 지정

형식

flex-flow: <flex-direction> <flex-wrap>;

---

3. 플렉스 박스 레이아웃의 정렬 속성

3-1. justify-content

• 주축 방향으로 플렉스 아이템 정렬

형식

justify-content: <속성값>;

속성값

• flex-start : 주축 시작 기준 정렬
• flex-end : 주축 끝 기준 정렬
• center : 주축 중앙 정렬
• space-between : 아이템 사이 간격 동일
• space-around : 아이템 둘레 간격 동일
• space-evenly : 아이템 사이 및 양끝 간격 동일

---

3-2. align-items

• 교차축 방향으로 플렉스 아이템 정렬
• 모든 아이템에 동일하게 적용

형식

align-items: <속성값>;

속성값

• stretch : 교차축 방향으로 크기 자동 확장 (기본값)
• flex-start : 교차축 시작 기준 정렬
• flex-end : 교차축 끝 기준 정렬
• center : 교차축 중앙 정렬
• baseline : 텍스트 기준선 기준 정렬

---

3-3. align-content

• 플렉스 아이템이 두 줄 이상일 때
  교차축 방향으로 줄 단위 정렬

형식

align-content: <속성값>;

• flex-start, flex-end, center
• space-between, space-around, space-evenly
• stretch

※ flex-wrap: wrap이 설정된 경우에만 효과 있음

---

3-4. align-self

• 개별 플렉스 아이템 하나만 교차축 방향 정렬
• align-items를 덮어씀

형식

align-self: <속성값>;

속성값

• auto
• flex-start
• flex-end
• center
• baseline
• stretch

---

핵심 정리

• justify-content → 주축 정렬
• align-items → 교차축 전체 아이템 정렬
• align-content → 여러 줄일 때 교차축 줄 정렬
• align-self → 개별 아이템 교차축 정렬

 

---

7.2 그리드 레이아웃으로 2차원 레이아웃 설계하기

1. 그리드 레이아웃 개요

그리드 레이아웃(Grid Layout)이란

• **행(row)과 열(column)**을 동시에 사용하여
  2차원 레이아웃을 설계하는 CSS 레이아웃 방식
• 페이지 전체 구조 설계에 적합

---

그리드 레이아웃의 구성 요소

• 행 (row)
  그리드 레이아웃의 가로줄
• 열 (column)
  그리드 레이아웃의 세로줄
• 그리드 셀 (grid cell)
  하나의 행과 하나의 열이 만나 이루어지는 공간
• 그리드 갭 (grid gap)
  그리드 셀과 그리드 셀 사이의 간격
• 그리드 아이템 (grid item)
  그리드 셀 안에 배치되는 콘텐츠
• 그리드 라인 (grid line)
  행과 열을 구분하는 선
• 그리드 넘버 (grid number)
  그리드 라인에 부여되는 번호
• 그리드 컨테이너 (grid container)
  display: grid 또는 inline-grid가 적용된 부모 요소

---

레이아웃 확인 방법

• 브라우저 개발자 도구
  Elements 탭 → grid 아이콘 클릭 → 행, 열, 라인 번호 확인 가능

---

2. 그리드 레이아웃의 기본 속성

2-1. display 속성

• 요소를 그리드 컨테이너로 설정

형식

display: grid;
display: inline-grid;

---

2-2. grid-template-columns / grid-template-rows

• 열과 행의 크기와 개수 지정

형식

grid-template-columns: <1열> <2열> ...;
grid-template-rows: <1행> <2행> ...;

---

2-3. row-gap / column-gap

• 그리드 셀 사이의 간격 지정

형식

row-gap: <크기>;
column-gap: <크기>;

---

3. 그리드 레이아웃의 정렬 속성

3-1. align-items

• 그리드 아이템 전체를 셀의 세로 방향으로 정렬

형식

align-items: <속성값>;

속성값

• stretch : 셀을 꽉 채우도록 늘림
• start : 셀 상단 정렬
• center : 셀 세로 중앙 정렬
• end : 셀 하단 정렬

---

3-2. align-self

• 개별 그리드 아이템의 세로 방향 정렬

형식

align-self: <속성값>;

---

3-3. justify-items

• 그리드 아이템 전체를 셀의 가로 방향으로 정렬

형식

justify-items: <속성값>;

속성값

• stretch : 셀을 꽉 채우도록 늘림
• start : 셀 왼쪽 정렬
• center : 셀 가로 중앙 정렬
• end : 셀 오른쪽 정렬

---

3-4. justify-self

• 개별 그리드 아이템의 가로 방향 정렬

형식

justify-self: <속성값>;

---

3-5. place-items (단축 속성)

• align-items + justify-items를 한 번에 지정

형식

place-items: <align-items> <justify-items>;

---

3-6. place-self (단축 속성)

• align-self + justify-self를 한 번에 지정

형식

place-self: <align-self> <justify-self>;

---

4. 그리드 레이아웃의 배치 속성

4-1. grid-template-areas

• 그리드의 행과 열을 이름으로 정의

형식

grid-template-areas:
  "header header"
  "nav content"
  "footer footer";

---

4-2. grid-area

• 그리드 아이템에 영역 이름 지정

형식

grid-area: <영역이름>;

---

4-3. grid-column-start / grid-column-end

• 그리드 아이템의 열 시작 / 끝 번호 지정

형식

grid-column-start: <번호>;
grid-column-end: <번호>;

---

4-4. grid-row-start / grid-row-end

• 그리드 아이템의 행 시작 / 끝 번호 지정

형식

grid-row-start: <번호>;
grid-row-end: <번호>;

---

그리드 라인과 넘버

• 그리드 라인 : 행과 열을 구분하는 선
• 그리드 넘버 : 각 라인에 붙는 고유 번호

---

4-5. grid-column (단축 속성)

• 열 시작과 끝을 한 번에 지정

형식

grid-column: <start> <end>;
grid-column: <start> / span <열 개수>;

---

4-6. grid-row (단축 속성)

• 행 시작과 끝을 한 번에 지정

형식

grid-row: <start> <end>;
grid-row: <start> / span <행 개수>;

---

핵심 정리

• Flexbox : 1차원 레이아웃 (가로 또는 세로)
• Grid : 2차원 레이아웃 (행 + 열)
• items : 전체 아이템 정렬
• self : 개별 아이템 정렬
• areas / line 번호 : 위치 지정 방식

---

 

---

 

.caption

overflow: hidden;

position: absolute;

transform:translateY

transition: all 0.6s ease-in-out; /* 나타날 때 부드럽게 트레지션 추가 */

사용해서 애니메이션 구현

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/newproduct.css">
  <title>Document</title>
</head>
<body>
  <div id="container">
    <h1>신상품 목록</h1>
    <ul class="prod-list">
      <li>
        <img src="/images/prod1.jpg">
        <div class="caption">
          <h2>상품 1</h2>
          <p>상품 1 설명 텍스트</p>
          <p>가격 : 12,345원</p>
        </div>
      </li>
      <li>
        <img src="/images/prod2.jpg">
        <div class="caption">
          <h2>상품 2</h2>
          <p>상품2 설명 텍스트</p>
          <p>가격 : 12,345원</p>
        </div>
      </li>
      <li>
        <img src="/images/prod3.jpg">
        <div class="caption">
          <h2>상품 3</h2>
          <p>상품 3 설명 텍스트</p>
          <p>가격 : 12,345원</p>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

#container {
  width: 1000px;
  margin: 20px auto;
}
h1 {
  text-align: center;
}
.prod-list {
  list-style: none;
  padding: 0;
}
.prod-list li {
  float: left;
  padding: 0;
  margin: 10px;
  position: relative; 
  overflow: hidden;
}
.prod-list img {
  margin: 0;
  padding: 0;
  float: left;
  /*float: left; 때문에 캡션이 이미지 위치로 감  */
  z-index: 5;
}
.prod-list .caption {
  position: absolute;
  top: 200px;
  /* 기존 위치보다 200px 아래로로 */
  width: 300px;
  height: 200px;
  padding-top: 20px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: #fff;
  transition: all 0.6s ease-in-out;
  /* 나타날 때 부드럽게 트레지션 추가 */
  z-index: 10px;
}

.prod-list li:hover .caption {
  transform:translateY(-200px);
}

---

flex속성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/flex-basic.css">
  <title>flex</title>
  <style>
    /* .flex-container {
      display: flex;
      flex-direction: column-reverse;
    } */
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
    <div class="flex-item">item-4</div>
  </div>
</body>
</html>

.flex-container {
  width: 300px;
  height: 200px;
  background-color: #c4c4c4;
  border: 1px solid black;
}
.flex-item {
  color: white;
  background-color: #ff5252;
}
.flex-item:nth-child(2n){
  background-color: blue;
}
/* .flex-item:nth-child(2nd) 짝수를 얘기함 */

---

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/flex-basic.css">
  <title>flex</title>
  <style>
    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
    <div class="flex-item">item-4</div>
  </div>
</body>
</html>

css 동일

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/flex-basic.css">
  <title>flex</title>
  <style>
    .flex-container {
      display: flex;
      flex-direction: column-reverse;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
    <div class="flex-item">item-4</div>
  </div>
</body>
</html>

css동일

---

    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      flex-wrap: wrap;
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */

---

    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      /* flex-wrap: wrap; */
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */
      flex-wrap: wrap-reverse;
      /* 역방향 */

---

    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      /* flex-wrap: wrap; */
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */
      /* flex-wrap: wrap-reverse; */
      /* 역방향 */
      flex-flow: row wrap;

---

    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      /* flex-wrap: wrap; */
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */
      /* flex-wrap: wrap-reverse; */
      /* 역방향 */
      /* flex-flow: row wrap; */
      /* direction과 wrap속성을 한번에 지정 */
      justify-content: space-around;
    }

---

    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      /* flex-wrap: wrap; */
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */
      /* flex-wrap: wrap-reverse; */
      /* 역방향 */
      /* flex-flow: row wrap; */
      /* direction과 wrap속성을 한번에 지정 */
      justify-content: space-between;

---

    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      /* flex-wrap: wrap; */
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */
      /* flex-wrap: wrap-reverse; */
      /* 역방향 */
      /* flex-flow: row wrap; */
      /* direction과 wrap속성을 한번에 지정 */
      justify-content: space-evenly;

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/flex-basic.css">
  <title>flex</title>
  <style>
    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      /* flex-wrap: wrap; */
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */
      /* flex-wrap: wrap-reverse; */
      /* 역방향 */
      flex-flow: row wrap;
      /* direction과 wrap속성을 한번에 지정 */
      /* justify-content: space-evenly; */
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
    <div class="flex-item">item-4</div>
    <div class="flex-item">item-5</div>
    <div class="flex-item">item-6</div>
    <div class="flex-item">item-7</div>
    <div class="flex-item">item-8</div>
    <div class="flex-item">item-9</div>
    <div class="flex-item">item-10</div>
    <div class="flex-item">item-11</div>

  </div>
</body>
</html>

---

    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      /* flex-wrap: wrap; */
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */
      /* flex-wrap: wrap-reverse; */
      /* 역방향 */
      flex-flow: row wrap;
      /* direction과 wrap속성을 한번에 지정 */
      /* justify-content: space-evenly; */
      align-items: baseline;
    }
  </style>

---

    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      /* flex-wrap: wrap; */
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */
      /* flex-wrap: wrap-reverse; */
      /* 역방향 */
      flex-flow: row wrap;
      /* direction과 wrap속성을 한번에 지정 */
      /* justify-content: space-center; */
      /* justify-content: space-between; */
      /* justify-content: space-evenly; */
      /* align-items: baseline; */
      align-content: center;
    }

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/flex-basic.css">
  <title>flex</title>
  <style>
    .flex-container {
      display: flex;
      /* flex-direction: column-reverse; */
      /* flex-wrap: wrap; */
      /* 컨테이너 사이즈를 벗어나면 개행을 시킴 */
      /* flex-wrap: wrap-reverse; */
      /* 역방향 */
      /* flex-flow: row wrap; */
      /* direction과 wrap속성을 한번에 지정 */
      /* justify-content: space-center; */
      /* justify-content: space-between; */
      /* justify-content: space-evenly; */
      /* align-items: baseline; */
      /* align-content: center; */
    }
    .flex-item:nth-child(1){
      align-self: flex-start;
    }
    .flex-item:nth-child(2){
      align-self: flex-end;
    }
    .flex-item:nth-child(3){
      align-self: center;
    }
    .flex-item:nth-child(4){
      align-self: baseline;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
    <div class="flex-item">item-4</div>
    <!-- <div class="flex-item">item-5</div>
    <div class="flex-item">item-6</div>
    <div class="flex-item">item-7</div>
    <div class="flex-item">item-8</div>
    <div class="flex-item">item-9</div>
    <div class="flex-item">item-10</div>
    <div class="flex-item">item-11</div> -->

  </div>
</body>
</html>

.flex-container {
  width: 300px;
  height: 200px;
  background-color: #c4c4c4;
  border: 1px solid black;
}
.flex-item {
  color: white;
  background-color: #ff5252;
}
/* .flex-item:nth-child(2n){
  background-color: blue;
} */

/* .flex-item:nth-child(2nd) 짝수를 얘기함 */

---

응용 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="/css/flex-basic.css"> -->
  <title>flex</title>
  <style>
    .flex-container {
      display: flex;
      width: 450px;
      height: 150px;
      background-color: white;
      border: 1px solid black;
      margin-bottom: 20px;
      align-items: center;      
    }
    .box {
      padding: 5px 45px;
      background-color: #222;
      margin: 5px;
    }
    #box1{
      align-self: flex-start;
    }
    #box3{
      align-self: stretch;
    }
    p {
      color: #fff;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="box" id="box1"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box" id="box3"><p>3</p></div>
    <div class="box"><p>4</p></div>

  </div>
</body>
</html>

---

grid

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

.grid-container {
  width: 300px;
  height: 200px;
  background-color: #c4c4c4;
  border: 1px solid black;
}
.grid-item {
  color: white;
  background-color: #ff5252;
}
.grid-item:nth-child(2n){
  background-color: blue;
}

/* .grid-item:nth-child(2nd) 짝수를 얘기함 */

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      grid-template-columns: 100px;
      grid-template-rows: 100px 100px 100px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      grid-template-columns: 100px 1fr;
      grid-template-rows: 100px 100px 100px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      /* grid-template-columns: 100px 1fr; */
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 100px 100px 100px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      /* grid-template-columns: 100px 1fr; */
      /* fr 나머지 픽셀에서 자유롭게 사이즈를 지정하게 되는것 */
      grid-template-columns: 1fr 2fr;
      grid-template-rows: 100px 100px 100px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      /* grid-template-columns: 100px 1fr; */
      /* fr 나머지 픽셀에서 자유롭게 사이즈를 지정하게 되는것 */
      /* grid-template-columns: 1fr 2fr; */
      grid-template-columns: repeat(3, 100px);
      /* 3개의 컬럼을 100px로 반복해라 */
      grid-template-rows: 100px 100px 100px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      /* grid-template-columns: 100px 1fr; */
      /* fr 나머지 픽셀에서 자유롭게 사이즈를 지정하게 되는것 */
      /* grid-template-columns: 1fr 2fr; */
      /* grid-template-columns: repeat(3, 100px); */
      /* 3개의 컬럼을 100px로 반복해라 */
      grid-template-columns: minmax(100px, 1fr);
      grid-template-rows: 100px 100px 100px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      /* grid-template-columns: 100px 1fr; */
      /* fr 나머지 픽셀에서 자유롭게 사이즈를 지정하게 되는것 */
      /* grid-template-columns: 1fr 2fr; */
      /* grid-template-columns: repeat(3, 100px); */
      /* 3개의 컬럼을 100px로 반복해라 */
      /* grid-template-columns: minmax(100px, 1fr); */
      grid-template-columns: fit-content(40%);
      /* 최솟값의 40% */
      grid-template-rows: 100px 100px 100px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      /* grid-template-columns: 100px 1fr; */
      /* fr 나머지 픽셀에서 자유롭게 사이즈를 지정하게 되는것 */
      /* grid-template-columns: 1fr 2fr; */
      grid-template-columns: repeat(3, 100px);
      /* 3개의 컬럼을 100px로 반복해라 */
      /* grid-template-columns: minmax(100px, 1fr); */
      /* grid-template-columns: fit-content(40%); */
      /* 최솟값의 40% */
      grid-template-rows: 100px 100px 100px;
      row-gap: 10px;
      column-gap: 20px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      /* grid-template-columns: 100px 100px 100px; */
      /* grid-template-columns: 100px 1fr; */
      /* fr 나머지 픽셀에서 자유롭게 사이즈를 지정하게 되는것 */
      /* grid-template-columns: 1fr 2fr; */
      /* grid-template-columns: repeat(3, 100px); */
      /* 3개의 컬럼을 100px로 반복해라 */
      /* grid-template-columns: minmax(100px, 1fr); */
      /* grid-template-columns: fit-content(40%); */
      /* 최솟값의 40% */
      /* grid-template-rows: 100px 100px 100px; */
      /* row-gap: 10px; */
      /* column-gap: 20px; */
      grid-template-columns: 100px 100px;
      grid-template-columns: 100px 100px;
      align-items: stretch;
      justify-items: center;
      place-items: stretch center;/*위 두 줄과 같음 */

    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>grid-template-areas</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-areas:
      "header header header"
      "sidebar content content"
      "footer footer footer";
      align-self: stretch;
    }
    #header {
      grid-area:header;
    }
    #sidebar {
      grid-area: sidebar;
    }
    #content {
      grid-area: content;
    }
    #footer {
      grid-area: footer;
    }
    .grid-item {
      color: white;
      background-color: #ff5252;
    }
    .grid-item:nth-child(2n) {
      background-color: #bf5e5e;
    }

  </style>
</head>
<body>
  <div class="grid-container">
    <p id="header" class="grid-item">header</p>
    <p id="sidebar" class="grid-item">sidebar</p>
    <p id="content" class="grid-item">content</p>
    <p id="footer" class="grid-item">footer</p>
  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>grid-template-areas</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-areas:
      "header header header"
      "sidebar content content"
      "sidebar footer footer";
      align-self: stretch;
    }
    #header {
      grid-area:header;
    }
    #sidebar {
      grid-area: sidebar;
    }
    #content {
      grid-area: content;
    }
    #footer {
      grid-area: footer;
    }
    .grid-item {
      color: white;
      background-color: #ff5252;
    }
    .grid-item:nth-child(2n) {
      background-color: #bf5e5e;
    }

  </style>
</head>
<body>
  <div class="grid-container">
    <p id="header" class="grid-item">header</p>
    <p id="sidebar" class="grid-item">sidebar</p>
    <p id="content" class="grid-item">content</p>
    <p id="footer" class="grid-item">footer</p>
  </div>
</body>
</html>

---

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>grid-template-areas</title>
  <style>
    .grid-container {
      width: 1200px;
      height: 900px;
      display: grid;
      /* grid-template-areas:
      "header header header"
      "sidebar content content"
      "sidebar footer footer"; */
      grid-template-areas:
      "header header sidebar"
      "content footer footer"
      "content footer footer";
      align-self: stretch;
    }
    #header {
      grid-area:header;
    }
    #sidebar {
      grid-area: sidebar;
    }
    #content {
      grid-area: content;
    }
    #footer {
      grid-area: footer;
    }
    .grid-item {
      color: white;
      background-color: #ff5252;
    }
    .grid-item:nth-child(2n) {
      background-color: #bf5e5e;
    }

  </style>
</head>
<body>
  <div class="grid-container">
    <p id="header" class="grid-item">header</p>
    <p id="sidebar" class="grid-item">sidebar</p>
    <p id="content" class="grid-item">content</p>
    <p id="footer" class="grid-item">footer</p>
  </div>
</body>
</html>

---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      /* grid-template-columns: 100px 1fr; */
      /* fr 나머지 픽셀에서 자유롭게 사이즈를 지정하게 되는것 */
      /* grid-template-columns: 1fr 2fr; */
      /* grid-template-columns: repeat(3, 100px); */
      /* 3개의 컬럼을 100px로 반복해라 */
      /* grid-template-columns: minmax(100px, 1fr); */
      /* grid-template-columns: fit-content(40%); */
      /* 최솟값의 40% */
      /* row-gap: 10px; */
      /* column-gap: 20px; */
      /* grid-template-columns: 100px 100px; */
      /* grid-template-columns: 100px 100px; */
      /* align-items: stretch; */
      /* justify-items: center; */
      /* place-items: stretch center; */
    }
    .grid-item:nth-child(1) {
      grid-column-start: 1;
      grid-column-end: 3;
    }
    .grid-item:nth-child(2) {
      grid-column-start: 3;
      grid-column-end: 4;
    }
    .grid-item:nth-child(3) {
      grid-row-start: 2;
      grid-row-end: 4;
      background-color: orange;
    }
    .grid-item:nth-child(4) {
      grid-column-start: 2;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end: 4;
      background-color:chocolate;
    }
  </style>

</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>

 

 

결과 가 같은 두개 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/grid-basic.css">
  <title>grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      /* grid-template-columns: 100px 1fr; */
      /* fr 나머지 픽셀에서 자유롭게 사이즈를 지정하게 되는것 */
      /* grid-template-columns: 1fr 2fr; */
      /* grid-template-columns: repeat(3, 100px); */
      /* 3개의 컬럼을 100px로 반복해라 */
      /* grid-template-columns: minmax(100px, 1fr); */
      /* grid-template-columns: fit-content(40%); */
      /* 최솟값의 40% */
      /* row-gap: 10px; */
      /* column-gap: 20px; */
      /* grid-template-columns: 100px 100px; */
      /* grid-template-columns: 100px 100px; */
      /* align-items: stretch; */
      /* justify-items: center; */
      /* place-items: stretch center; */
    }
    .grid-item:nth-child(1) {
      /* grid-column-start: 1;
      grid-column-end: 3; */
      grid-column: 1 3;
    }
    .grid-item:nth-child(2) {
      /* grid-column-start: 3;
      grid-column-end: 4; */
      grid-column: 3 4;
    }
    .grid-item:nth-child(3) {
      /* grid-row-start: 2;
      grid-row-end: 4; */
      grid-row: 2/span 2;
      background-color: orange;
    }
    .grid-item:nth-child(4) {
      /* grid-column-start: 2;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end: 4; */
      grid-column: 2/span 2;
      grid-row: 2/span 2;
      background-color:chocolate;
    }
  </style>

</head>
<body>
  <div class="grid-container">
    <div class="grid-item">item-1</div>
    <div class="grid-item">item-2</div>
    <div class="grid-item">item-3</div>
    <div class="grid-item">item-4</div>
    <!-- <div class="grid-item">item-5</div>
    <div class="grid-item">item-6</div>
    <div class="grid-item">item-7</div>
    <div class="grid-item">item-8</div>
    <div class="grid-item">item-9</div>
    <div class="grid-item">item-10</div>
    <div class="grid-item">item-11</div> -->

  </div>
</body>
</html>