0

.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: enter image description here

tonitone120
  • 1,920
  • 3
  • 8
  • 25

1 Answers1

1

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Okay, saw this video (2min mark) and thought something similar was achieved with CSS-Grid https://www.youtube.com/watch?v=qjJR3qYCd54&t=366s – tonitone120 Jan 07 '21 at 22:02
  • 1
    @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. – Temani Afif Jan 07 '21 at 22:03
  • 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 Jan 08 '21 at 02:11
  • @tonitone120 what kind of changes you are looking for? – Temani Afif Jan 08 '21 at 07:35
  • 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. – tonitone120 Jan 08 '21 at 17:00
  • posted a related question here you'd probably (and very appreciatively) be able to help me with: https://stackoverflow.com/questions/65634843/can-i-apply-css-to-a-flex-item-when-it-wraps-onto-a-new-row?noredirect=1#comment116047426_65634843 – tonitone120 Jan 09 '21 at 02:58