空列的CSS网格布局

Question

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

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

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

希望这是有意义的，并且会有所帮助。