我正在進入CSS網格，我想知道如何用它創建一個響應性的類似磁貼的布局，就像這樣:

https://aggie.io/0g_rzi1fg7

網格是解決這類問題的好方法嗎..？標記:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 50%;
  grid-template-columns: 50% 50%;

  a {
    border: 1px solid blue;
  }
}

<div class="grid">
  <a href="" class="grid-lg">
    Large item here
  </a>

  <div class="grid-sm-container">
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
  </div>
</div>

你可以試試這樣的東西

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

.grid-item {
  background-color: #ddd;
  padding: 10px;
  text-align: center;
}

/* Define styles for different screen sizes */
@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media screen and (max-width: 480px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

<div class="grid-container">
  <div class="grid-item">Tile 1</div>
  <div class="grid-item">Tile 2</div>
  <div class="grid-item">Tile 3</div>
  <!-- Add more grid items as needed -->
</div>

可以參考w3schools的教程。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  /* background-color: Tomato; */
  padding: 10px;
}

.grid-container > div {
  background-color: dodgerblue;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

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