Reply To: Code Puzzle: How to make a perfect grid on any screen.

[nixnerd]

@Paulie_D, I literally didn’t know what vh and vw units were until right now. For that I thank you sir.

This is a badass idea… but how does one maintain aspect ratios with them? The only way I know to maintain aspect ratio is like this:

.square{
    width: 10%;
}

.square:before{
    display: block;
    content: '  ';
    padding-top: 100%;
}

I suppose you could do this with vh and vw as the units instead of %… but I don’t see the point, especially when % has better support.

As far as figuring out the size of the squares though… how would you handle that? I’m wondering if there is some SUPER elegant way to do it with pure CSS… but I highly doubt it. Remember, there can’t be any overlap or squares halfway off the screen.

I think there is only one way to do it… and that is with Javascript and a custom function.