CSS/HTML来创建两个并排的、等宽的、可折叠的列，它们在展开后保持列的宽度，使用grid？

<div class="grid-container">
  <div class="grid-item">
    <!-- 第一个列 -->
  </div>
  <div class="grid-item">
    <!-- 第二个列 -->
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;  /* 列之间的间距 */
}

.grid-item {
  width: 100%;  /* 列宽度为100% */
  background-color: #f0f0f0;  /* 列的背景色 */
}

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;  /* 在小屏幕下，只显示一列 */
  }
}