I'm facing a unique scenario here. I'm attempting to utilize CSS grid to display content side by side. The challenge is that one side of the content needs to have dynamic height while the other side should remain fixed.
Here's an example:
.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,...
Fusce pharetra convallis urna. Cur...
</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>The goal here is to have content in 4 columns, each with 25% width, and 5 rows with fixed height (16px each), represented by the blue area. As the text content might vary (in the red area), I'd like it to expand into more rows if needed without affecting the image (green area).
I've experimented with auto rows but encountered the issue of the image stretching along with the text due to automatic row height. I'm uncertain if achieving this layout is feasible using only grid.