具有空列的 Css 网格布局答案

【问题标题】：Css grid layout with empty column具有空列的 Css 网格布局
【发布时间】：2019-01-03 22:12:43
【问题描述】：

我是 CSS 网格的新手，我想知道是否可以在以下场景中使用它。我想创建一个包含 3 列的布局，每列包含一个按钮。在某些情况下，最后一列的按钮将不会显示（使用角度 ngif），但我不希望更改布局（即使最后一列不包含任何内容，它也应该看起来像） .这是如何实现的？

我尝试使用 grid-template-columns: 1fr repeat(3, auto); 创建 3 列，但如果最后一列中的按钮未显示，则所有其他按钮都会向右移动一点。

【问题讨论】：

【解决方案1】：

因为网格模板应用于直接子级，所以如果您有 3 列，则应该有 3 个直接子级。如果您有一个 ng-if，当 ng-if 评估为 false 时，您将只有 2 个孩子，因此我建议您将此 ng-if 封装到另一个 div 中，这样即使最后一个为空，您也始终拥有这 3 个孩子.

例如：

<div class="my-grid">
  <div>column 1</div>
  <div>column 2</div>
  <div>
    <div ng-if="displayColumn3">column 3</div>
  </div>
</div>

希望这有意义并有所帮助。

【讨论】：