CSS Grid (или flexbox?) с 1 строкой и 3 столбцами, но с 2-3 элементами, первый из которых занимает 1-2 столбца

Я изо всех сил пытаюсь выполнить этот относительно простой макет для 2-3 элементов. Все, что я пробовал из px/fr/% с minmax() и сеткой, кажется, не совсем правильно.

Я хочу, чтобы мой input занимал все оставшееся место независимо от того, присутствует button или нет. select должен оставаться одного размера независимо от того, присутствует ли button.

Проценты имеют смысл, но не совсем так, как хотелось бы. без кнопки: 75% ввод + 25% выбор с кнопкой: 50% ввод + 25% выбор + 25% кнопка

Что мне не хватает, чтобы заставить это работать? Я просто думаю об этом неправильно? ПОКАЖИ МНЕ ПУТЬ!

Я даже пытался добавить независимый css к каждому элементу с помощью grid-column: 1 / 3:

.input-grid .input-grid-input { grid-column: 1 / 3 }
.input-grid .input-grid-select { grid-column: 4 }
.input-grid .input-grid-button { grid-column: 5 }

Без кнопки выхода:

С кнопкой:

.input-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-template-columns: minmax(50%, 75%) 25% minmax(0, 25%);
}
<div class = "input-grid">
  <input type = "text" class = "input-grid-input" value = "input" data-form-type = "other">

  <select class = "input-grid-select" data-form-type = "other">
    <option value = "Select Value 1">Select Value 1</option>
    <option value = "Select Value 2" disabled = "disabled">Select Value 2</option>
  </select>

  <button class = "btn input-grid-btn btn--primary" hidden = "hidden">
    Check Availability
  </button>
</div>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
157
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, вы можете добиться того, чего хотите, используя flexbox. Элементы класса .grid будут занимать 100% пространства. В случае, если вы хотите, чтобы они отображались в отдельных строках для небольших экранов, вы можете просто использовать медиа-запрос для гибкого переноса элементов.

CSS

.grid {
    display: flex;
}

.grid input {
    display: flex;
    flex: 1 1 auto;
}

input[type = button] {
    display: block;
    text - align: center;
    max - width: 150px;
}

HTML

<div class = "grid">
    <input type = "text" placeholder = "Input text">
    <select><option>Choose option</option></select>
    <input type = "button" value = "Check Availability">
</div>
Ответ принят как подходящий

Я бы предложил указать третье значение grid-template-columns (для кнопки) как max-content.

Спасибо! Это сработало для меня. grid-template-columns: minmax(50%, 75%) 25% max-content;

cmeza 21.11.2022 16:29

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