Отступ в сетке CSS

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

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

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

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

html css alignment css-grid

16.04.2019 09:20

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

706

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте 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>

16.04.2019 09:23

Другие вопросы по теме

Как изменить цвет каждой буквы <p> только с помощью css

Абсолютное изображение при наведении, а затем обратно к относительному

Не удается удалить странный элемент из меню в шаблоне WordPress

Выравнивание по правому краю элементов ссылок, содержащих изображение и текст, вдоль панели навигации

Наведение кнопки и тега Anchor & Active не работает в Chrome в Iphone

Создавайте карты динамически и организуйте их макет с помощью Flex

Редактирование положения формы и вещей внутри формы

Я пытаюсь использовать значок шрифта awesome в качестве кнопки

Мой сайт не может распознать мой файл css, на котором запущен скрипт Ghost css

Как поставить 2 div на одну позицию?

Отступ в сетке CSS

Ответы 1

Другие вопросы по теме

Похожие вопросы