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>
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Учебник по Javascript
Учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
5 распространенных ошибок, которых следует избегать при начале работы с HTML
5 распространенных ошибок, которых следует избегать при начале работы с HTML
Приветствую вас, изучающие HTML! Я составил список распространенных ошибок, которые часто допускают студенты, начинающие изучать HTML. Пожалуйста,...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
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

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