grid demo1

當然可以，這裏提供一個基本的 CSS Grid 佈局的案例。

HTML 部分：

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
  <div class="item item9"></div>
</div>

CSS 部分：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列的寬度平均分，也可以使用像素值或百分比來定義 */
  grid-template-rows: repeat(3, 100px); /* 三行，每行的高度都是100像素，同樣也可以使用像素值或百分比來定義 */
  gap: 10px; /* 每個網格之間的間隙爲10像素 */
}

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

.item1 {
  grid-column: 1 / 3; /* 定義item1所跨越的列爲第1和第2列 */
  grid-row: 1; /* 定義item1所在的行爲第1行 */
}

.item2 {
  grid-column: 3; /* 定義item2所在的列爲第3列 */
  grid-row: 1 / 3; /* 定義item2所跨越的行爲第1和第2行 */
}

.item3 {
  grid-column: 1; /* 定義item3所在的列爲第1列 */
  grid-row: 2 / 4; /* 定義item3所跨越的行爲第2、3行 */
}

.item4 {
  grid-column: 2; /* 定義item4所在的列爲第2列 */
  grid-row: 3; /* 定義item4所在的行爲第3行 */
}

.item5 {
  grid-column: 3; /* 定義item5所在的列爲第3列 */
  grid-row: 4; /* 定義item5所在的行爲第4行 */
}

.item6 {
  grid-column: 1; /* 定義item6所在的列爲第1列 */
  grid-row: 4; /* 定義item6所在的行爲第4行 */
}

.item7 {
  grid-column: 2 / 4; /* 定義item7所跨越的列爲第2、3列 */
  grid-row: 5; /* 定義item7所在的行爲第5行 */
}

.item8 {
  grid-column: 1; /* 定義item8所在的列爲第1列 */
  grid-row: 6; /* 定義item8所在的行爲第6行 */
}

.item9 {
  grid-column: 2; /* 定義item9所在的列爲第2列 */
  grid-row: 6; /* 定義item9所在的行爲第6行 */
}

這個案例展示了一個 3*3 的網格，其中每個網格的大小都是 100px，每個網格之間有 10px 的間隙，使用 grid-column 和 grid-row 定義了每個網格所佔的位置。