Отображение кнопок в фиксированном положении

Question

Я использую сетку в моей угловой форме HTML.Сетка выглядит следующим образом:

 .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2%;
        grid-auto-rows: 90%;
    }

Эта сетка образует два прямоугольника параллельно.Теперь у меня есть несколько div, которые будут отображать данные по этим прямоугольникам, и у каждого из них есть одна кнопка внизу.Но когда у одного или другого div нет данных для отображения, мои кнопки перемещаются вверх по сетке.Я хочу, чтобы эти кнопки находились в нижней части сетки в фиксированных положениях и не двигались вверх, когда кнопки выше над кнопками не отображают данные. Как я могу это сделать.

Answer 1

Чтобы удерживать кнопку внизу, когда нет данных для отображения, вы должны установить атрибут display элемента, в который вставлена ​​кнопка, на flex, а margin-top кнопки на auto.

Вы также должны удалить grid-auto-rows: 90%; из класса .grid или, по крайней мере, установить его в автоматический режим.Это приводит к тому, что ваша сетка не растет должным образом с содержимым.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows#Values

HTML:

<div class="grid">
  <div class="cell">
    <div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <button class="button">My Button 1</button>
  </div>
  <div class="cell">
    <button class="button">My Button 2</button>
  </div>
</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2%;
  grid-auto-rows: auto;
}

.cell {
  display: flex;
  flex-direction: column;
}

.button {
  margin-top: auto;
  height: 40px;
  padding: 10px;
  width: 200px;
}

.cell - это элемент, куда вставляются кнопка и содержимое.Смотрите здесь рабочий пример: https://codepen.io/bosoria/pen/MWgdVej