Отступ в CSS Grid - PullRequest
Новая
       28

Отступ в CSS Grid

3 голосов
/ 16 апреля 2019

У меня есть заголовок с 4 кнопками, я делю его на 6 столбцов и хочу оставить первый и последний пустыми и расположить кнопки в центре. 

.test {
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  align-items: center;
  justify-content: center;
}

Однако, если яиспользуйте grid-column-start: 2, кнопки переставлены вниз.

1 Ответ

2 голосов
/ 16 апреля 2019

Используйте grid-column-start: 2 только на первой кнопке, используя button:first-child.У вас есть проблема, так как вы устанавливаете grid-column-start для всех кнопок - см. Демонстрацию ниже: 

.test {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.test button:first-child {
  grid-column-start: 2;
}
<div class="test">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>
...