1. 기본기

image.png

<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto auto;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

2. 비율정하기

image.png

<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        /* 100이 가로길이라면 (100 * 1/7) (100 * 5/7) (100 * 1/7) */
        column-gap: 10px;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

3. 위치 정하기 및 합치기

image.png

image.png

<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: auto auto auto auto;
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
      .grid_item:last-child {
        /* grid-column-start: 3;
        grid-column-end: 5; */
        grid-column: 3/5;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

4. Repeat()

image.png

<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid_container {
        background-color: #2196f3;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(9, 50px);
      }
      .grid_item {
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Grid Elements</h1>

    <div class="grid_container">
      <div class="grid_item">1</div>
      <div class="grid_item">2</div>
      <div class="grid_item">3</div>
      <div class="grid_item">4</div>
      <div class="grid_item">5</div>
      <div class="grid_item">6</div>
      <div class="grid_item">7</div>
      <div class="grid_item">8</div>
      <div class="grid_item">9</div>
    </div>
  </body>
</html>

6. 실습 과제

image.png