CSS ⑦ 그리드(grid) 레이아웃

그리드 레이아웃

웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 입니다.
2차원 방식이란 가로(row)와 세로(column)를 같이 사용해 레이아웃을 설계하는 방식 입니다.
그리드 박스는 '그리드 컨테이너'와 '그리드 항목'으로 구성 됩니다.
반응형 디자인에도 유용하게 사용될 수 있으며, 미디어 쿼리와 함께 사용하여 화면의 크기에 따라 격자의 크기와 요소들의 배치를 변경할 수 있습니다.

구성 요소

행(row) : 가로줄
열(column) : 세로줄
그리드 셀 : 행과 열이 만나 이루어지는 하나의 공간
그리드 갭 : 그리드 셀과 그리드 셀 사이의 간격
그리드 아이템 : 그리드 셀 안에서 표현되는 컨텐츠
그리드 컨테이너 : 최상위 부모 요소

기본 속성

display 속성

그리드 레이아웃은 항상 display 속성값을 grid 혹은 inline-grid로 지정 합니다.
해당 속성이 지정된 요소는 그리드 컨테이너가 되고, 자식 요소는 그리드 아이템이 됩니다.

display: grid

display: inline-grid

grid-template-columns, grid-template-rows 속성

예시

3열 2행 만들기

.grid-item{
    color:black;
    background-color: royalblue;
  }
  .grid-item:nth-child(2n){
    background-color: orange;
  }

  .grid-container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</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>
</body>
</html>

상대적인 크기를 지정하는 fr단위

그리드 레이아웃의 행과 열의 크기를 지정할 때 픽셀(px)을 사용하는 경우, 크기가 항상 고정되므로 반응형 웹 디자인에 적합하지 않습니다.
아래의 코드는 2행 3열의 그리드 박스를 생성하며 각각의 행은 100px의 높이를 가지고, 열은 2:1:1의 비율을 가집니다.

.grid-container {
    margin: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 100px 100px;
  }

자동으로 컬럼 개수를 조절하는 auto-fit, auto-fill

그리드 셀의 개수가 미리 정해져 있지 않은 상황에서 사용하면 유용합니다.

auto-fit : 그리드 영역 안에 남는 공간이 있다면, 그리드 셀의 크기를 늘리고 그리드 셀의 개수를 자동으로 증가시켜 그리드 영역을 채웁니다. 이 값은 그리드 셀의 개수와 크기를 모두 조정합니다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

✅ minmax()는 그리드 항목의 최소 크기와 최대 크기를 정의 합니다.

예) minmax(200px, 1fr) : 최소 너비 200px, 최대 너비 1fr

auto-fill : 그리드 영역 안에 그리드 셀이 가득 찰 때까지 셀의 개수를 자동으로 증가시킵니다. 이 값은 그리드 셀의 크기를 늘리지 않고, 그리드 셀의 개수만 늘립니다.
만약 그리드 영역 안에 남는 공간이 있다면, 남는 공간은 그대로 유지됩니다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

정리!!

auto-fit은 그리드 항목의 수를 일정하게 유지하면서 '항목의 크기를 조정'하여 그리드를 채우려고 하며,
auto-fill은 그리드 항목의 크기를 '일정하게 유지'하면서 더 많은 항목을 그리드에 채우려고 합니다.

row-gap, column-gap 속성

그리드 셀의 간격을 조정합니다.

.grid-container {
    margin: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(50px, 200px));
    grid-template-rows: repeat(2, minmax(10px, auto));
    row-gap: 10px;
    column-gap: 10px;
  }

정렬 속성

align-items와 align-self 속성

align-items 속성을 사용하면 그리드 셀의 높이가 그리드 아이템보다 클 때 각 그리드 아이템을 각 그리드 셀의 세로 방향으로 정렬할 수 있습니다.

grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px;
align-items:stretch;

justify-items와 justify-self 속성

그리드 아이템을 각 그리드 셀의 가로 방향으로 정렬합니다.

✅ 속성값은 align-items 속성과 같고 방향만 다릅니다.

배치 속성

grid-template-areas : 예제1번

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>그리드 레이아웃</title>
  <style>
    * {
      margin: 0;
    }
    .grid-container {
      margin: 20px;
      width: calc(100vw-40px);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
      grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
      row-gap: 2px;
      column-gap: 2px;
    }
    .grid-item {
      color: black;
      /* 정중앙에 놓고 싶을 때 */
      display: flex;
      justify-content: center;
      align-items: center;
      /* ------------------ */
      border: 1px solid darkblue;
    }
    #header {
      grid-area: header;
      background-color: green;
    }
    #sidebar {
      grid-area: sidebar;
      background-color: brown;
    }
    #content {
      grid-area: content;
      background-color: blueviolet;
    }
    #footer {
      grid-area: footer;
      background-color: orange;
    }

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

grid-template-areas : 예제 2번

✅ . 을 쓰면 해당 영역은 빈 공간으로 나타납니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #container {
      width: 700px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
      grid-template-areas: 
        "box1 box1 box1"
        "box2 box3 box3"
        "box2 . box4";
    }
    .box {
      color: #fff;
    }
    .box1 {
      background-color: #3689ff;
      grid-area: box1;
    }
    .box2 {
      background-color: #00cf12;
      grid-area: box2;
    }
    .box3 {
      background-color: #ff9019;
      grid-area: box3;
    }
    .box4 {
      background-color: #ffd000;
      grid-area: box4;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
  </div>
</body>
</html>

그리드 라인 : 예제 3번

그리드 컨테이너를 구성하는 행과 열을 그리는 선을 그리드 라인이라고 합니다.
아래의 강조선은 컬럼 2라인 입니다.

<!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-line</title>
  <style>
    .grid-container{
      display:grid;
      grid-template-columns:100px 100px 100px;
      grid-template-rows:100px 100px 100px;
      color: #fff;
    }
    .grid-item:nth-child(1){
      grid-column-start:1;
      grid-column-end:3;
      background-color: red;
    }
    .grid-item:nth-child(2){
      grid-column-start:3;
      grid-column-end:4;
      background-color: green;
    }
    .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:blue;
    }
  </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>
</body>
</html>

그리드 라인 : 예제 4번

<!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 line</title>
  <style>
    #container {
      width: 700px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
    }
    .box {
      padding: 15px;
      color: #fff;
      font-weight: bold;
      text-align: center;
    }
    .box1 {
      background-color: #3689ff;
      grid-column: 1/4;
    }
    .box2 {
      background: #00cf12;
      grid-row: 2/4;
      grid-column-start: 1;
    }
    .box3 {
      background-color: #ff9019;
      grid-column: 2/4;
      grid-row-start: 2;
    }
    .box4 {
      background-color: #ffd000;
      grid-column: 3/4;
      grid-row-start: 3;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
  </div>
</body>
</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>Document</title>
  <style>
    body {
      background-color: #eee;
    }
    #container {
      width: 700px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-template-areas: 
        "box1 box2 box3"
        "box4 box5 box6"
        "box7 box8 .";
      column-gap: 5px;
      row-gap: 5px;
    }
    .box {
      background-color: #fff;
      box-sizing: border-box;
      padding: 15px;
      border: 1px solid darkgray;
      display: flex;
      flex-direction: column;
    }
    .box p {
      font-size: 0.9em;
      font-weight: lighter;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="box box1">
      <h3>사진 제목</h3>
      <img src="./images/cup-1.jpg" alt="">
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ullam, numquam, Neque mollitia esse blanditils facere.</p>
    </div>
    <div class="box box2">
      <h3>사진 제목</h3>
      <img src="./images/cup-2.jpg" alt="">
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ullam, numquam, Neque mollitia esse blanditils facere.</p>
    </div>
    <div class="box box3">
      <h3>사진 제목</h3>
      <img src="./images/cup-3.jpg" alt="">
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ullam, numquam, Neque mollitia esse blanditils facere.</p>
    </div>
    <div class="box box4">
      <h3>사진 제목</h3>
      <img src="./images/cup-4.jpg" alt="">
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ullam, numquam, Neque mollitia esse blanditils facere.</p>
    </div>
    <div class="box box5">
      <h3>사진 제목</h3>
      <img src="./images/cup-5.jpg" alt="">
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ullam, numquam, Neque mollitia esse blanditils facere.</p>
    </div>
    <div class="box box6">
      <h3>사진 제목</h3>
      <img src="./images/cup-6.jpg" alt="">
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ullam, numquam, Neque mollitia esse blanditils facere.</p>
    </div>
    <div class="box box7">
      <h3>사진 제목</h3>
      <img src="./images/cup-7.jpg" alt="">
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ullam, numquam, Neque mollitia esse blanditils facere.</p>
    </div>
    <div class="box box8">
      <h3>사진 제목</h3>
      <img src="./images/cup-1.jpg" alt="">
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit. Ullam, numquam, Neque mollitia esse blanditils facere.</p>
    </div>
  </div>
</body>
</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>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      background-color: #eee;
    }
    #container {
      width: 700px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 300px);
      gap: 1rem;
    }
    .card-view {
      background-color: #fff;
      box-shadow: 1px 1px 5px #000;
      display: flex;
      flex-direction: column;
      height: 320px;
      padding: 0 24px;
    }
    .card-item-header {
      font-size: 1.5rem;
      text-align: center;
      padding: 10px 0;
    }
    .card-item-image {
      background-size: cover;
      height: 60%;
    }
    .card-item-desc {
      font-size: 0.8rem;
      padding: 10px 0;
    }
    .image-no1 {
      background-image: url(./images/cup-1.jpg);
    }
    .image-no2 {
      background-image: url(./images/cup-2.jpg);
    }
    .image-no3 {
      background-image: url(./images/cup-3.jpg);
    }
    .image-no4 {
      background-image: url(./images/cup-4.jpg);
    }
    .image-no5 {
      background-image: url(./images/cup-5.jpg);
    }
    .image-no6 {
      background-image: url(./images/cup-6.jpg);
    }
    .image-no7 {
      background-image: url(./images/cup-7.jpg);
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="card-view">
      <div class="card-item-header">사진 제목</div>
      <div class="card-item-image image-no1"></div>
      <div class="card-item-desc">Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit.Ullam, numquam. Neque mollitia esse blanditiis facere.</div>
    </div>
    <div class="card-view">
      <div class="card-item-header">사진 제목</div>
      <div class="card-item-image image-no2"></div>
      <div class="card-item-desc">Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit.Ullam, numquam. Neque mollitia esse blanditiis facere.</div>
    </div>
    <div class="card-view">
      <div class="card-item-header">사진 제목</div>
      <div class="card-item-image image-no3"></div>
      <div class="card-item-desc">Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit.Ullam, numquam. Neque mollitia esse blanditiis facere.</div>
    </div>
    <div class="card-view">
      <div class="card-item-header">사진 제목</div>
      <div class="card-item-image image-no4"></div>
      <div class="card-item-desc">Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit.Ullam, numquam. Neque mollitia esse blanditiis facere.</div>
    </div>
    <div class="card-view">
      <div class="card-item-header">사진 제목</div>
      <div class="card-item-image image-no5"></div>
      <div class="card-item-desc">Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit.Ullam, numquam. Neque mollitia esse blanditiis facere.</div>
    </div>
    <div class="card-view">
      <div class="card-item-header">사진 제목</div>
      <div class="card-item-image image-no6"></div>
      <div class="card-item-desc">Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit.Ullam, numquam. Neque mollitia esse blanditiis facere.</div>
    </div>
    <div class="card-view">
      <div class="card-item-header">사진 제목</div>
      <div class="card-item-image image-no7"></div>
      <div class="card-item-desc">Lorem ipsum dolor sit amet, consectetur 
      adipisicing elit.Ullam, numquam. Neque mollitia esse blanditiis facere.</div>
    </div>
  </div>
</body>
</html>

정리