css grid layout for the repeating pattern

[shmdhussain]

Trying to achieve the repeating patterns like the one in the image below using css grid Tried using the CSS grid , see the code pen https://codepen.io/shmdhussain/pen/MomwBq

I am not able to achieve the pattern except the first pattern,

It is working only when I give the hardcoded value for grid-row-start and grid-row-end property.

Note: Pleaser don't change the DOM structure. Thanks in advance for any help

[webcraftsman]

@shmdhussain I worked out a solution to your problem, https://codepen.io/webcraftsman/pen/awWNba. I made comments in the code to explain what I did. Basically you want to take out the hard coded values for grid-columns and grid-rows for your larger elements. I also used grid-auto-flow: row dense to get Box 5 to correctly align in the second row of your pattern.

Tested in Chrome 58, Firefox 54 and Safari 10.1.1

[thinsoldier]

Using @webcraftsman pen as a starting point I reduced the amount of css and made it easier to understand (in my opinion) but that required increasing the html slightly by adding some wrapping divs, so his is best for your request but I think mine is easiest to understand: https://codepen.io/thinsoldier/pen/NgZMMQ?editors=0100

[ryanwiemer]

This looks similar to what I am trying to achieve. Any thoughts on how I would implement the following repeatable pattern? I too was only able to do it by using hard coded values. Is it just a matter of understanding the correct nth selectors to determine which item is the "big one" or am I missing something?

[thinsoldier]

@ryanwiemer I'd define 3 1fr columns and set a height on grid-auto-rows. Then put a "big left" or "big right" class on the img tags that you want to be bigger.

.big { grid-row-end: span 2; grid-column-end: span 2;} 
.left{ grid-column-start:1; } 
.right{ grid-column-start:2;}

There proably is a way to do this with nth-child also.

[ryanwiemer]

@thinsoldier, Thanks for responding back! I put together a quick Codepen. Ideally I don't want to have to add a class for this. The end goal would be to repeat this pattern regardless if there are 12 items or 120 and no changes to HTML structure.

I think the nth-selectors to get a big item on 1,5,7,11,13,17....etc is just tripping me up. Math class coming back to haunt me I suppose. 😉

Would the property grid-auto-flow: dense help me or not really?

https://codepen.io/ryanwiemer/pen/ZXgeeV

Thanks, Ryan

[webcraftsman]

@ryanwiemer You can simplify it to two declarations: https://codepen.io/webcraftsman/pen/NaQjYQ

[ryanwiemer]

Awesome! Yes, that does the trick and keeps the code simple and repeatable.

Thank you both @webcraftsman and @thinsoldier for your help with this.

[gelsot]

Hello guys, any tips on how to produce the following grid pattern

Thanks :)

[webcraftsman]

@gelsot How about this: https://codepen.io/webcraftsman/pen/NMEBde? The pattern should work even if you needed to tweak the dimensions. I was just eyeballing it and guessing at the proportions and relationships of the different cells.

[gelsot]

Awesome. Thanks a billion @webcraftsman :)

[amadeakimmins]

Hello everyone,

I would be super grateful if anyone could help me out with this. I'm trying to make this grid pattern and make it repeatable so that I could keep adding more items.

Thank you in advance! :)

[webcraftsman]

@amadeakimmins Can you show the underlying grid? It is hard to tell from your graphic about sizing and such. And what is the grid row gap?