In the layout I have designed, there is an image on the left and text content on the right. The structure resembles this:
.left {
max-width: calc(100% - 150px);
float: left;
}
img {
width: 300px;
max-width: 100%;
}<div class="wrapper">
<div class="left"><img src="https://i.sstatic.net/W6Sd8.png" /></div>
<div class="right">Hello, I am Kitteh</div>
</div>The concept behind this design is to allow the image to be a maximum of 300px, while ensuring it always leaves at least 150px for the text content positioned next to it. The text will take up as much space as needed, with a minimum of 150px available due to the presence of the image.
I aim to replicate this layout using CSS grid, however, I am unsure how to utilize grid-template-columns effectively to achieve the same functionality. Currently, my attempt looks like this:
.wrapper {
display: grid;
grid-template-columns: auto minmax(150px, auto);
}
img {
width: 300px;
max-width: 100%;
}<div class="wrapper">
<div class="left"><img src="https://i.sstatic.net/W6Sd8.png" /></div>
<div class="right">Hello, I am Kitteh</div>
</div>While this setup enforces the 150px minimum width for the right column, it lacks the flexibility to expand to accommodate the image's size. How can I modify the grid layout to emulate the behavior achieved by floating elements in my initial example?