html – css grid Make one cell always the largest

Resizing the window horizontally demonstrates that the leftmost cell (with size 1fr) grows the most, but is also the first to shrink.

* {
  border: 1px solid black;

.grid {
  grid-template-columns: 1fr minmax(2em, max-content) minmax(2em, max-content);
  display: grid;
<div class="grid" width="100%">
  <div>lorem ipsum dolor sit amet</div>
  <div>consectetur adipiscing elit in</div>
  <div>venenatis dignissim erat vel fringilla</div>

How can I make the leftmost column grow the most when the window is wide enough to support it (and lock all the other columns to width: max-content)

But when the window width is shrinking, I want the leftmost column to pause at width: max-content and then the other columns should shrink to 2em width before the leftmost column starts shrinking too.

The leftmost cell should always be given size priority

I tried doing

grid-template-columns: min(1fr, minmax(max-content, 2em)) minmax(2em, max-content) minmax(2em, max-content);

but got told that’s an invalid property value (1fr doesn’t seem to be usable inside calculations )

Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here