隐藏网格列，其余列重新分配

Question

大家。

我正在尝试实现当包装容器宽度低于特定值时隐藏的网格列，而其余列应在整个宽度上重新分布：

对于 disappearing 列，visibility: hidden 和 display: none 都不起作用（因为空白 space 被留在删除的列中，而左列不占整个宽度）。

我的问题是：如何在不修改父网格容器的 grid-template-columns 的情况下使用纯 CSS 实现所需的行为？

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

.column {
  background: blue;
  color: #fff;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.columnA {
  grid-column-start: 1;
  grid-column-end: 2;
}

.columnB {
  grid-column-start: 2;
  grid-column-end: 4;
}

@media (max-width: 800px) {
  .columnA {
    visibility: hidden;
  }
}

<div class="grid">
  <div class="columnA column">columnA</div>
  <div class="columnB column">columnB</div>
</div>

Answer 1

像下面这样简化您的代码：

.grid {
  display: grid;
  grid-gap:5px;
  grid-auto-columns: minmax(100px, 1fr); /* size of one column */
  grid-auto-flow:column; /* column flow */
}

.column {
  background: blue;
  color: #fff;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.columnB {
  grid-column:span 2; /* B takes 2 columns */
} 

@media (max-width: 800px) {
  .columnA {
    display:none;
  }
}

<div class="grid">
  <div class="columnA column">columnA</div>
  <div class="columnB column">columnB</div>
</div>

如果您想保留模板（不需要），您可以按照以下步骤操作：

.grid {
  display: grid;
  grid-gap:5px;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

.column {
  background: blue;
  color: #fff;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.columnB {
  grid-column:span 2;
}

@media (max-width: 800px) {
  .columnA {
    display:none;
  }
  .columnB {
    grid-column:span 3; /* B will take 3 columns when A is hidden */
  }
}

<div class="grid">
  <div class="columnA column">columnA</div>
  <div class="columnB column">columnB</div>
</div>

隐藏网格列，其余列重新分配

Hide grid column with the rest of columns redistributing

html

css

css-grid