Я изо всех сил пытаюсь выполнить этот относительно простой макет для 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>
Я думаю, вы можете добиться того, чего хотите, используя 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;