CSS Grid (or flexbox?) with 1 row and 3 columns, but 2-3 elements that the 1st element will span 1-2 columns

Issue

I am trying my darndest to accomplish this relatively simple layout for 2-3 elements. Everything I’ve tried from px/fr/% with minmax() & grid can’t seem to get it quite right.

I want my input to take up all remaining space leftover whether or not the button is present. The select should remain the same size regardless if button is present.

The percentages make most sense, but isn’t exactly working like I’d like.
no button: 75% input + 25% select
with button: 50% input + 25% select + 25% button

What am I missing on getting this to work? Am I just thinking about this wrong? SHOW ME THE WAY!

I’ve even tried adding independent css to each element with the 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 }

With out button:

how I want it to look with no button

With button:

how I want it to look with a button

.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>

Solution

I would suggest that specifying the third value of grid-template-columns (for the button) as max-content.

Answered By – Itagaki Fumihiko

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published