Hi there,
I am trying to create a brick wall effect with Bootstrap, but having trouble working it out.
This is what I have:
Basically I would like to have 3 equal divs in one row and then 3 underneath that row also equal, but centered in the middle of the ones above.
Alternatively, a row of 4 and then 3 underneath centered.
I’m trying to create a brick wall effect. Not sure if that makes sense.
Does anyone know the best way I can do this?
I suggest using CSS Grid. Then you’ll get 1 2 3 in a row, then 3 4 5 in the next row easily, the columns all lined up.
I’d just add a class to each alternate row and do this.
(View on codepen for full screen layout)
Only one line of extra code needed in a default bootstrap set up.
(Note I haven’t added small screen classes so this is just the basic full screen version)
Not quite as easy I thought in CSS grid (without nested rows) but managed to do it 
Had a go at doing this with flex. Plus a couple of queries to wrap to shorter rows.
Just for fun and because I had some time I played around with this
It seems that I made that harder than it should be and I can lose all the grid placements except for the one recurring item
This makes it a lot easier especially if I lose the alternate coloured rows.
Keeping the alternate rows requires a little more code but still pretty neat. Here’s a version with media queries for smaller screens.
Finally the simpler version with media queries for alternate colors.
https://codepen.io/paulobrien/pen/VwQPwYQ
Good example
Yes flex is probably the way to go and the first example I gave in bootstrap (as per OPs attempt) was flex based but of course used nested rows. The flex layout will most likely need a max-width on the items to stop them blowing out with oversized content. The grid one will just overflow but not break the grid.
Flex probably makes more sense as we are not dealing with columns but grid will ensure that the integrity of columns is maintained.
I was really just testing out grid capabilities as it hasn’t become second nature yet for anything but the norm
I did have a second go at it, but it is virtually the same. I just thought it may be more efficient with min-width queries (mobile first) to have fewer resets. But it turned out there isn’t much in it.
That’s pretty concise.
In the end you have to repeat three things for media queries. i.e. Change the width, change the margin and re-set the margin on the previous one. I don’t think there’s much scope to reduce any more.
There was a similar process in the grid example where the grid-start had to be reset and changed and the width adjusted also. I used css variables but it didn’t really make it much shorter as you still had to change the variable.
It was an interesting exercise and the sort of puzzles I enjoy
Thanks for all the answers guys, much appreciated! I am fairly new to grid so I have chosen that one and had a play with it. I noticed that if I add grid-gap to add some spacing, that it adds an overflow, so I had to use margin instead. Is this generally the case with grid-gap?
Yes there are two trains of thought in that when the grid items are in percentage the grid parent can’t work out the width available properly as its a circular reference and you get overflow. If the items were in fr units there would not be a problem. Or it may simply be that 4 * 25% plus 20px gaps are too big
You can use minmax if you don’t want to use margin but use gap instead.
e.g.
grid-template-columns: repeat(
var(--columns),
minmax(auto, calc(100% / var(--columns)))
);
That should stop the overflow.
Or indeed you could probably just use the fr unit instead.
grid-template-columns: repeat(4, 1fr );
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.