0

I'm trying to use the auto-fit feature of the CSS grid to wrap grid items neatly for different screen sizes. This works well when all items I put into the auto-fitted grid container are of equal size; however if I make the items different sized, for small screen sizes, I am getting undesirable sizing when the items wrap.

This code snippet illustrates the issue I am having (if you resize the browser window you can see the issue clearly):

.wrapper {
  display: grid;
  padding: 10px;
  width: 90%; 
  grid-gap:10px;
  grid-template-columns: 
    repeat(auto-fit, minmax(300px, 1fr));
  
    box-sizing: border-box;
  border: 1.5px solid darkblue;
}

.first{
  grid-column: span 1;
  box-sizing: border-box;
  border: 1.5px solid darkgrey;
}

.second{
  grid-column: span 2;
  box-sizing: border-box;
  border: 1.5px solid darkgrey;
}
<div class='wrapper'>
  <div class='first'>
   First
  </div>    
  <div class='second'>
    Second
  <div>
</div>

This screenshot of different behaviours shows what's happening:

screenshot of different behaviours

Picture 1 is what's displayed when the items are of equal size at full screen - this wraps to Picture 2.

Picture 3 is what's displayed when the items are of different size - this wraps first to Picture 4 (expected), but then wraps to Picture 5 - this is not the same as Picture 2. (which would be the ideal behaviour) - the two items are of different size.

I suspect this is due to grid items collapsing in accordance with auto-fit at smaller screen sizes, but not collapsing the gaps between the collapsed grid items. Debugging in Chrome shows this but I don't know how to overcome it!

Am I on the right track? Is there any way to get the desired behaviour in Picture 2 when the items I'm placing into the container are of different size?

ahx
  • 1
  • 2
  • The problem is that you have `span: 1` on the first item and `span: 2` on the second one. So when they wrap, they retain those dimensions. Then there's the issue of the unoccupied grid cell that remains on the first row after the second row is created. Then there's the issue of the `grid-column-gap`. Lots of things to overcome; not enough details in your question about your overall goal. – Michael Benjamin Dec 11 '17 at 18:56
  • @ahx Your question would be greatly improved by adding a [mcve] directly to the post rather than linking to an off-site code sandbox. – TylerH Dec 11 '17 at 19:26
  • Thanks for coming back to me. My overall goal is to get the effect of Picture 2. when the items wrap, even when they are of different size. Regarding your points: I've intentionally got them spanning two different sizes as I want them to display in those proportions when they are on the same row. When they wrap, I can see an unoccupied grid cell being created, but as it's empty, I don't know why it's not collapsing fully -isn't this what `auto-fit` should do? I'm afraid I don't know what you mean re: `grid-column-gap`. – ahx Dec 11 '17 at 19:26
  • @TylerH my codepen does exactly illustrate the problem when I view it on my computers (and resize the browser to simulate the small screen sizes). Combined with the screenshot, I thought this would meet these requirements. I'm not sure in what way it isn't minimal, complete and verifiable? I will see how I can add it directly to stack overflow now. – ahx Dec 11 '17 at 19:32
  • @ahx Your Codepen is the off-site sandbox I was referring to; we have to go to another website to see your code. SO has a cool "Stack Snippet" feature that lets you put in JS, HTML, and CSS just like JSFiddle or CodePen, it's the icon next to the image icon in the edit view. – TylerH Dec 11 '17 at 19:40
  • @TylerH I just tried this but when I tried to embed my example, I wasn't able to demonstrate the behaviour above due to the way the window resizing is handled within the SO page - so I've left the codepen as is for now. – ahx Dec 11 '17 at 19:45
  • @ahx Sometimes you will have to maximize the snippet and resize your whole browser window to match. The bit about including your code in the question is not really optional, though (because when CodePen goes down, the question becomes useless/unanswerable). – TylerH Dec 11 '17 at 19:46
  • @TylerH Ok, I'll update it now. Thanks for the info. – ahx Dec 11 '17 at 19:49
  • Maybe flexbox is a better solution for this layout. https://jsfiddle.net/s3o1aor3/1/ – Michael Benjamin Dec 11 '17 at 20:02
  • 1
    That's working as I'd like, many thanks again. I thought that grid would be able to solve all my layout problems but I'll look into flexbox in more detail. FYI if I set grid-gap on wrapper to 0, the problem of uneven sizing falls away, but the layout is too cramped. – ahx Dec 11 '17 at 20:13

1 Answers1

0

Use width: 100%; and float: left on main div if you are using html but without seeing your html code can not tell properly. it would be good if you paste your section code here.

ravi rana
  • 11
  • 5