This is not a CSS grid job, it’s a flexbox job
.wrapper {
border: 5px solid pink;
display: flex;
flex-wrap:wrap;
}
.wrapper > *:nth-child(1) {
background-color: purple;
width: 200px;
}
.wrapper > *:nth-child(2) {
background-color: orange;
flex-basis:70px;
flex-grow:1;
}<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
</div>.wrapper {
width: 500px;
border: 5px solid pink;
display: grid;
grid-template-columns: max-content
repeat(auto-fit, minmax(70px, 1fr));
grid-auto-columns: 1fr;
}
.wrapper > *:nth-child(1) {
background-color: purple;
width: 200px;
}
.wrapper > *:nth-child(2) {
background-color: orange;
}<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
</div>GC = Grid-container.
GI = grid-item.
I’d like for my 2nd GI to fill up the remaining space in row1. However, when the space left for the 2nd GI on row1 reaches below 70px, I want it to start it to wrap to a new implicit row below – the width of which spans the container (1fr).
When this 2nd GI gets put on a new row, I’d like to make CSS changes to it. Is there anyway to ‘look out’ for this?
Chrome is complaining this is an invalid value: 
You can’t , thats’ not the way css-grid works
Okay, saw this video (2min mark) and thought something similar was achieved with CSS-Grid
@tonitone120 no need to see it, CSS grid is not a suitable tool for this. forget CSS grid if you want to deal with wrapping and different width elements.
Thanks for the answer. I’d like to make changes to the 2nd GI with CSS once it’s put on its own row. Can you think of anyway to ‘look out’ for this with Flexbox or anything else?
@tonitone120 what kind of changes you are looking for?
Each flex item would likely be it’s own flexbox so changes to make its flex-items sit differently. For instance, the 2nd element, when on the same row as the first, would position its flex-items vertically. When on its own row, it’d position its items horizontally.