.container1_1 {
  display: grid;
  grid-template:
      "header header" 100px
      "sidebar main" 1fr
      "footer footer" 50px
      / 200px 1fr;
}

.container1_2 {
  display: grid;
  grid-auto-flow: row dense; /* 先按行排列，並填補所有空格 */
}

.container1_3 {
  display: grid;
  grid-auto-rows: 100px; /* 每新增一行自動設置高度為 100px */
}

.container2_1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 創建 3 列，每列寬度為 1fr */
}

.container2_2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr)); /* 每列最小 200px，最大為 1fr */
}

.container2_3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自動調整列數，寬度介於 150px 到 1fr */
}

.container3_1 {
  display: grid;
  justify-items: center; /* 項目在單元格內水平居中 */
  align-items: center; /* 項目在單元格內垂直居中 */
}

.container3_2 {
  display: grid;
  justify-content: space-between; /* 網格內容在容器內水平分佈 */
  align-content: center; /* 網格內容在容器內垂直居中 */
}

.container4 {
  display: grid;
  grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
}

.container4 .header {
  grid-area: header;
}
.container4 .sidebar {
  grid-area: sidebar;
}
.container4 .main {
  grid-area: main;
}
.container4 .footer {
  grid-area: footer;
}

.container4 .item1 {
  grid-column: 1 / 3; /* 項目橫跨第一到第三列 */
  grid-row: 1 / 2; /* 項目在第一行 */
}

.container4 .item2 {
  grid-column: 2 / 4; /* 項目橫跨第二到第四列 */
  grid-row: 1 / 2; /* 項目在第一行 */
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自動調整列數 */
  gap: 20px; /* 項目之間的間距 */
}

.gallery-item {
  background-color: #e0e0e0;
  padding: 20px;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 1.2em;
}

.box {
  width: 2rem;
  height: 1rem;
}

.item:nth-child(1) {
  background-color: #ddd;
}

.item:nth-child(2) {
  background-color: #ccc;
}

.item:nth-child(3) {
  background-color: #bbb;
}

.item:nth-child(4) {
  background-color: #aaa;
}

.item:nth-child(5) {
  background-color: #999;
}

.item:nth-child(6) {
  background-color: #888;
}

.item:nth-child(7) {
  background-color: #777;
}

.item:nth-child(8) {
  background-color: #666;
}