0

With Flex, I can wrap using flex-wrap. I'm experimenting with CSS grid and want to wrap an element but can't find a way to do that. Is it possible?

Here is my code

.item1 {
  grid-area: topic;
}

.item2 {
  grid-area: user;
}

.item3 {
  grid-area: bin;
}

.bin-grid {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-areas: 'topic topic topic' 'user bin bin';
  gap: 0;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
<div class="bin-grid">
  <div class="item1">Header</div>
  <div class="item2">Left</div>
  <div class="item3">Right</div>
</div>

I tried using grid-template-columns:200px auto; but that isn't wrapping the elements. I need item2 and item3 to wrap.

After a link that was posted by a SO user for the same issue, I tried using grid-template-columns:repeat(auto-fill, 186px) but the elements will not wrap in my case. Yet, I can see the example works just fine. I'm not sure why it won't work in my case.

0x02
  • 33
  • 6
  • Possible duplicate here: https://stackoverflow.com/questions/43129360/css-grid-wrapping Check out that question for answers that might help you out –  Jan 27 '23 at 06:03
  • Thanks, Paul. I'll have a look now. – 0x02 Jan 27 '23 at 06:04
  • I just compared the code in the link to mine and there is a difference; the link doesn't seem to be using mixed columns like my code is. My gridlines are: `user bin bin` and I'm trying to wrap `user` and `bin`. Maybe that's the reason why this isn't working for me. – 0x02 Jan 27 '23 at 06:24
  • It's looking like grid cannot wrap when there is a second column. If I'm interpreting this post correctly. See accepted answer: https://stackoverflow.com/questions/47082096/how-to-get-grid-items-of-different-lengths-to-wrap – 0x02 Jan 27 '23 at 06:41
  • you have a fundamental issue here. Your `grid-template-columns` refer to a 2-column grid while `grid-template-areas` indicates a 3-column grid. Flexbox is used to control only 1 direction and as such also allows auto-wrapping, growing, and shrinking. Grid however will align elements in a grid which is a table-like-placement. – tacoshy Jan 27 '23 at 07:14

0 Answers0