Best way to implement grid without using grid

#1

Anybody know the best way to implement this:

grid
grid1161×697 208 KB

without actually using css grids. What i have seen of css grids is confusing. Or if grid is the only way to do it, can you point me to a site that can explain how to do this easily.
Thank you

#2

You can do the same with flexbox wrap by setting each element to 50% width and feeding 4 elements per container:

.container {
  display: flex;
  flex-wrap: wrap;
}
.card {
  width: 50%;
}

…and then just apply recursively the same to the containers

#3

Hello @deedee

Can it be done? Yes, but it is even worse because it will involve maths and also you would need to think about the responsiveness on top. So, I wouldn’t recommend it at all.

Looking at your image, you would be able to do this with flexbox. It has less controls, but it is easier.

When I was learning it myself, this was one of the article guide that I have found it to be helpful.

Funnily enough, I have created my own self-reference guide on Codepen. Not that I expect you to learn so much or find the information helpful, but you are welcome to use these examples to play around with.

Hope this helps

#4

Grids should be grids, I would agree, but flexbox is a king without doubt :crown:

Here’s very quick demo: https://codepen.io/iiikid/full/RwPLovZ

1 Like
#5

thank you so very much

1 Like
#6

@snigo
What does this do?

.child:nth-last-child(n+3) { 
  margin-bottom: 10px;
}
#7

It says select all children from the end starting with 3rd one, in other words - select all except last two.

This is fallback for gap property that unfortunately still has to be used until we see more green cells here: https://caniuse.com/#search=gap

#8