1

I'm trying to get a grid to wrap, when the grid items are not the same size. The grid should wrap when the height changes, not the width.

Here's an example of the solution, but implemented with flexbox. Resize the window height up and down, and you'll see .block2 wrap to the left (important)

https://codepen.io/guanzo/pen/xYKreP

My key requirements are:

  1. .block-wrapper is right justified
  2. .block1 is of variable height
  3. .block2 is of static height
  4. The wrapper and 2 blocks are 350px in width.
  5. 15px space between blocks in all directions
  6. .block2 wraps to the left of .block1 on height overflow.

As you can see, the flexbox implementation fails with #5. I can't put a margin-left: 15px on .block1 because that would make .block-wrapper 365px in width, and rule #4 would fail. .block-wrapper should only ever be 350px or 700px(when wrapped) in width ..block-wrapper has a margin-left: 15px b/c there are other, unmentioned elements in play.

Now that's out of the way, I wanted to try a solution with css grid. auto-fit seems to be the only way to wrap grids, but I just can't make it work.

Here's a codepen with my attempted grid:

https://codepen.io/guanzo/pen/JpPJVM?editors=1100

*{
  box-sizing: border-box;
}
html,body{
  height: 100%;
 margin: 0;
}
.container{
  border: 1px solid black;
  width: 90%;
  height: 90%;
  display:flex;
  justify-content: flex-end;
}
.block-wrapper{
  display: grid;
  grid-gap: 15px;
  grid-template-rows: repeat(auto-fit, auto);
}
.block1{
  border: 2px solid darkgreen;
  width: 350px;
}
.block2{
  border: 2px solid darkred;
  width: 350px;
  height: 250px;
}
<div class="container">
  <div class="block-wrapper">
    <div class="block1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies eros id purus imperdiet mattis. Donec id lacus bibendum, luctus felis ac, commodo dolor. Donec suscipit venenatis nisi quis pharetra. Curabitur tincidunt ullamcorper eleifend. Aenean in diam est. Nulla a fringilla mauris. Curabitur in odio est. Fusce orci lorem, condimentum vitae mattis sit amet, malesuada ac libero. Praesent et massa risus. Donec mattis sem at enim aliquam, non eleifend risus ullamcorper. In sed nibh nulla.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies eros id purus imperdiet mattis. Donec id lacus bibendum, luctus felis ac, commodo dolor. Donec suscipit venenatis nisi quis pharetra. Curabitur tincidunt ullamcorper eleifend. Aenean in diam est. Nulla a fringilla mauris. Curabitur in odio est. Fusce orci lorem, condimentum vitae mattis sit amet, malesuada ac libero. Praesent et massa risus. Donec mattis sem at enim aliquam, non eleifend risus ullamcorper. In sed nibh nulla.</div>
    <div class="block2"></div>
  </div>
<div>

I need something like grid-template-rows: repeat(auto-fit, auto); but it's an invalid rule.

I'll also accept solutions that fix my flexbox solution and adheres to all the rules.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Eric Guan
  • 15,474
  • 8
  • 50
  • 61
  • 2
    A block can't be both 350px and have 15px margin on its sides and still fit inside a wrapper that is 350px. Do you mean 350px, margin included?, which would mean the actual block content width will be 320px (350-15-15). – Asons Jan 28 '18 at 09:35
  • 2
    Furthermore, and because one block's height is dynamic, it is not possible to also adjust the margins after they wrapped, as there is no property that can detect when an item wrap. The solution will need a script to accomplish that. – Asons Jan 28 '18 at 09:45
  • @Michael_B Since this question has both a Flexbox and Grid sample, where either can be used to solve the issue described, I don't see how that duplicate is fully relevant? Furthermore, the accepted answer suggest Flexbox being the solution, but not how, as asked for here, which could be answered here, as I found no dupe target this issue explicit. – Asons Jan 29 '18 at 10:43
  • @LGSon if you feel this post should be re-opened so you can provide a more targeted answer you should go ahead. – Michael Benjamin Jan 29 '18 at 20:53
  • 1
    @Michael_B Thanks, and I might, if I get a reply on my earlier comments. – Asons Jan 29 '18 at 20:56
  • @LGSon Wrapping the blocks was a haphazard solution to another problem, which I ended up solving, so this question no longer needs an answer. thanks – Eric Guan Jan 29 '18 at 22:35

0 Answers0