CSS Grid - использование grid-template-column без создания пустых элементов div

Question

Я хочу создать экран, на котором есть только один div, который находится в центре и занимает 33% размера экрана. И справа, и слева от него пусто. Что я делаю:

.loginScreenContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

И создаю 3 элемента, два из которых пусты.

 <div className='loginScreenContainer'>
      <div>Empty</div>
      <div>Actual Content</div>
      <div>Empty</div>
 </div>

Неловко. Есть ли другой способ?

Answer 1

Вам не нужно использовать сетку. Вы можете сделать это, используя ширину и поля.

HTML

<div class='loginScreenContainer'>
      <div>Actual Content</div>
</div>

CSS

.loginScreenContainer {
    width: 33%;
    margin:auto;
}

Проверьте это https://jsfiddle.net/tb9dqz07/1/

Answer 2

Просто добавьте grid-column: 2 к своему контенту. Тогда содержимое будет в правильном столбце.

.loginScreenContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.content {
  grid-column: 2;
}

<div class='loginScreenContainer'>
  <div class="content">Actual Content</div>
</div>

Вот отличное руководство по многим css сеткам: https://css-tricks.com/snippets/css/complete-guide-grid/