Расположите 2 вертикальных элемента в середине экрана, используя простую CSS Grid

Question

.container {
  display: grid;
  place-items: center;
  grid-gap: 20px;
  height: 200px;
  border: 1px solid red;
  }
  
  .top {
  border: 1px solid blue;
  }
  
  .bottom {
  border: 1px solid green;
  }

<div class="container">
  <div class="top">Top Element</div>
  <div class="bottom">Bottom Element</div>
</div>

Чего мне не хватает, чтобы расположить эти элементы кабины в середине .контейнера рядом друг с другом вертикально с разницей в 20 пикселей только?В настоящее время они расположены в центре каждой ячейки сетки.Конечно, я могу использовать простую обертку и заменить сетку с некоторыми полями.Но я хотел бы иметь как можно меньше CSS и элементов оболочки .

Answer 1

Вам нужно определить grid-template-columns, если хотите, чтобы они были рядом друг с другом

.container {
  display: grid;
  justify-content: center;
    align-items: center;
  grid-gap: 20px;
  grid-template-columns: repeat(2, max-content);
  height: 200px;
  border: 1px solid red;
}

.top {
  border: 1px solid blue;
}

.bottom {
  border: 1px solid green;
}

<div class="container">
  <div class="top">Top Element</div>
  <div class="bottom">Bottom Element</div>
</div>

Answer 2

Я понял это таким образом.Не уверен, что это лучшее решение, но опубликую его.

.container {
  display: grid;
  place-content: center;
  grid-gap: 20px;
  height: 400px;
  border: 1px solid red;
}

.top {
  border: 1px solid blue;
}

.bottom {
  border: 1px solid green;
}

<div class="container">
  <div class="top">Top Element</div>
  <div class="bottom">Bottom Element</div>
</div>

Таким образом, я могу вставить столько дочерних элементов, сколько захочу.Я предполагаю, что браузеры MS не поддерживают place-items и place-content сокращение, поэтому вы должны использовать align-content и justify-content вместо.

Answer 3

Вы можете сделать это с align-self: end & align-self: start, заданными элементами сетки :

.container {
  display: grid;
  place-items: center;
  grid-gap: 20px;
  height: 200px;
  border: 1px solid red;
}

.top {
  align-self: end;
  border: 1px solid blue;
}

.bottom {
  align-self: start;
  border: 1px solid green;
}

<div class="container">
  <div class="top">Top Element</div>
  <div class="bottom">Bottom Element</div>
</div>

Или с align-content: center, заданным для контейнера grid :

.container {
  display: grid;
  place-items: center;
  align-content: center;
  /*grid-gap: 20px;*/
  height: 200px;
  border: 1px solid red;
}

.top {
  border: 1px solid blue;
}

.bottom {
  border: 1px solid green;
}

<div class="container">
  <div>Element</div>
  <div class="top">Top Element</div>
  <div>Element</div>
  <div class="bottom">Bottom Element</div>
  <div>Element</div>
</div>