Waffles : A CSS Grid

Auto Sizing

Waffles can do another trick, you can place up to 12 children in a portion, and waffles will autosize the children equidistantly

this is handy in a lot of situations, especially situations when you are not sure exactly hwo many elements you are going to next, or your are picking na unusual porportion, such as 5 equal spaces, or 7 equal spaces

And of course like the basic sizes, everything here is nest-able n levels deep. That means you can put w-auto divs in other w-auto divs, or you can put them inside standard porportion divs. Drag the sliders below to see

They read your browser's mind

Again, by using the w-auto feature, you've made your div hyper responsive. Drag the window and observe the divs below.

Your auto sized will stack,a nd resize automatically based on the window size. 12 becomes 6 stacks of 2, then 3 stacks of 4, the 2 stacks of 6, and then finally only when the browser, or device has a very low resolution do they become 100%

1
2
3
4
5
6
7
8
9
10
11
12