时间戳

首页 > 解决方案 > 具有空列的 Css 网格布局

angular - 具有空列的 Css 网格布局

问题描述

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

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

标签： angularcsscss-grid

解决方案

因为网格模板应用于直接子级，所以如果您有 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>

希望这是有道理的并有所帮助。

推荐阅读