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

[nixnerd]

I have an idea that seems relatively simple. I want to make a perfect grid on any screen. What do I mean when I say perfect? I mean exact squares that all fit into the browser and stay completely contained.

The only way I can think to do this is to use Javascript to query the window size (width and height). Then, write a little math script to find the largest possible number that will divide EVENLY into both the height and width. Then, that number will be the width and height of my squares (in pixels).

Does anyone know of a tool that already does this? Or should I just write it? How would you build this little tool?

[Paulie_D]

Squares….I would use vh orvw units.

[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.

[Paulie_D]

Aspect ratio would be automatic since you define the width and height the same..

e.g.

.box {
  width:10vw;
  height:10vw;
  float:left;
  border:1px solid lightgrey;
}

http://codepen.io/Paulie-D/pen/fakeD

I admit it’s a partial solution…there are still a lot of things to figure out.

[nixnerd]

Holy crap. That’s not how I thought it would work at all. That’s awesome!!! I’ve been doing the ol’ pseudo class trick.

I checked out the support for this and it seems pretty slim… but I could use the other method as a fallback maybe??

[Paulie_D]

but I could use the other method as a fallback maybe??

I don’t see why not…I’m assuming that viewport units are detectable with Modernizr or something similar.

[nixnerd]

I’m assuming that viewport units are detectable with Modernizr or something similar.

Oh yeah… they are.

I think those units are so much easier to work with. I created some mixins that essentially abstracted the other method to this level of ease but damn… that’s so awesome.

Now, I just need to do the math to determine how many units each square will be based on the window size.

[Gary Pickles]

Hi Nix, been having a look at this as something to do to learn about maths & arrays in jquery, my plan was to use prime numbers in an array to find out if the height and width have common factor which the highest one would be size of the square that would fit exactly into the browser window.

I got so far with the codepen below, this is just returning the results to the page, i’m sure i could get the results into two new arrays for height and width, but don’t know how to approach comparing them to find the highest matching and if there are no matches returning 1 as the result.

See the Pen difzv by Gary Pickles

Resize window to see it work…

[Author]

Posts