在CSS网格中将元素移动到列外

<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>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 定义网格容器的列 */
  grid-gap: 10px; /* 定义网格项之间的间隔 */
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
}

.grid-item:nth-child(3) {
  grid-column: -1; /* 将第三个元素移动到列外 */
}