CSS grid: ensure dynamic rows are all of a specific size

February 10, 2023

I have a bit of a strange situation. I am trying to use a CSS grid to put content side by side. The problem is that one side of the content is dynamic so should be automatic in height while the other side should be a fixed size.

Here’s an example of what this looks like:

.page {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(5, 16px);
  grid-auto-rows: fit-content(16px);
  border: 1px solid blue;
}

.text {
  grid-row-start: 1;
  grid-row-end: auto;
  grid-column-start: 1;
  grid-column-end: 4;
  border: 2px solid red;
  display: flex;
}

.description {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 5;
  border: 1px solid green;
  display: flex;
}

<div class="page">
<div class="text">
  Nam adipiscing. Aenean viverra rhoncus pede. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Donec posuere vulputate arcu. Fusce egestas elit eget lorem.

Quisque rutrum. In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nullam dictum felis eu pede mollis pretium. Maecenas egestas arcu quis ligula mattis placerat.

Fusce pharetra convallis urna. Curabitur suscipit suscipit tellus. Vestibulum volutpat pretium libero. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.

Fusce pharetra convallis urna. Curabitur suscipit suscipit tellus. Vestibulum volutpat pretium libero. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
</div>
<div class="description">
   <img src="https://www.clker.com/cliparts/y/c/r/G/g/M/warning-md.png" alt='Warning clip art' style="height: 100%;" />
</div>
</div>

So the idea here is: I want my content to be 4 columns of 25% width each and 5 rows of a fixed height (16px each). This is the blue area in the snippet. However because the text content can vary (red area) I would like the content to be able to take up more rows if necessary, however I don’t want the expansion to affect the image (green area).

I have tried using auto rows but that has the side-effect of stretching the image as well because the row height is automatic. I am not sure if this is even possible using only grid.

>Solution :

Fix the height of the image and don’t define any row configuration:

.page {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  border: 1px solid blue;
}

.text {
  grid-column: span 3;
  border: 2px solid red;
}

.description {
  border: 1px solid green;
  display: flex;
  height: 80px;
}

<div class="page">
<div class="text">
  Nam adipiscing. Aenean viverra rhoncus pede. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Donec posuere vulputate arcu. Fusce egestas elit eget lorem.

Quisque rutrum. In consectetuer turpis ut velit. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nullam dictum felis eu pede mollis pretium. Maecenas egestas arcu quis ligula mattis placerat.

Fusce pharetra convallis urna. Curabitur suscipit suscipit tellus. Vestibulum volutpat pretium libero. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.

Fusce pharetra convallis urna. Curabitur suscipit suscipit tellus. Vestibulum volutpat pretium libero. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
</div>
<div class="description">
   <img src="https://www.clker.com/cliparts/y/c/r/G/g/M/warning-md.png" alt='Warning clip art' style="height: 100%;" />
</div>
</div>