Как сделать так, чтобы отступ между колонками не менялся?
Делаю верстку на гридах. Задача: сделать блок с преимуществами состоящий из 3х колонок с отступом между колонками 30px и максимальной шириной каждой колонки 300 пикселей, т.е. на больших экранах данный блок с преимуществами должен быть по центру экрана компьютера. В gap я прописал 30px, в ширине каждой колонки задал значение max width 300px. Но почему-то на больших экранах gap пропорционально увеличивается и становится в разы больше, чем 30px, а мне нужен фиксированный. Подскажите как это сделать?
Дополнительно:
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: calc(300px * 3 + 30px * 2); margin: auto; } |
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: calc(300px * 3 + 30px * 2); margin: auto; }
snippet
- спасибо огромное
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать так, чтобы отступ между колонками не менялся, можно использовать CSS свойство flex-grow. Flexbox позволяет легко управлять распределением пространства между элементами внутри контейнера.
Прежде всего, убедитесь, что у ваших колонок установлено свойство display: flex; на контейнере, который содержит эти колонки.
Затем, чтобы сделать отступ между колонками фиксированным, можно использовать свойство flex-grow. Установите значение flex-grow: 0; для каждой колонки. Это позволит им не изменять свой размер в зависимости от контента или доступного пространства.
Пример кода на CSS:
.container { display: flex; } .column { flex-grow: 0; /* другие стили для колонок */ }
Таким образом, установив значение flex-grow: 0; для каждой колонки внутри flex-контейнера, вы сможете добиться фиксированного отступа между колонками, который не будет меняться в зависимости от содержимого или размера окна браузера.