CSS сетка с пустым столбцом

Question

Я новичок в сетке CSS, и я хотел бы знать, возможно ли использовать его в следующем сценарии.Я хотел бы создать макет, содержащий 3 столбца, и каждый столбец, содержащий кнопку.В некоторых случаях кнопка из последнего столбца не будет отображаться (с использованием углового ngif), но я не хочу, чтобы макет был изменен (даже если последний столбец не содержит ничего, он должен выглядеть так, как если бы он был),Как этого добиться?

Я пытался создать 3 столбца с помощью grid-template-columns: 1fr repeat(3, auto);, но если кнопка в последнем столбце не отображается, все остальные кнопки немного смещены вправо.

Answer 1

Поскольку шаблон сетки применяется к прямым дочерним элементам, поэтому если у вас есть 3 столбца, у вас должно быть 3 прямых дочерних элемента.Если у вас есть ng-if, у вас будет только 2 ребенка, когда ng-if оценивается как false, поэтому я бы порекомендовал вам инкапсулировать этот 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>

надеюсь, что это имеет смысл и поможет.