Introduction A better way Beyond centering Everything is a list 6 examples Thinking "inside the box" Installation

Thinking "inside the box"

Browsers renders things from left to right and top to bottom. Just like text in a book.

This is great when it comes to exactly that, text.

Over the years I found that all designs ultimately consists of horizontal and vertical lists and everything isn't rendered starting at "top left". Therefore, rows and columns originates from a perfect center.

Take a look at these two, representing how the browser renders text and elements natively; the code is exactly what you'd expect.

123
123
w/o parent height/width
1
2
3
1
2
3
w/o parent height/width
<div class="w-36 h-36"> 123 </div>
<div class="w-36 h-36"> <div>1</div> <div>2</div> <div>3</div> </div>

☝️ please compare and study these closely 👇

If we now apply rows and columns to these we get:

123
123
row
w/o parent height/width
1
2
3
1
2
3
column
w/o parent height/width

Similar right? Intentionally so. The idea here isn't to mess with how the browser naturally renders things, but to enchance its native behaviour. Don't worry, it's all just CSS-styling using flexbox.

Imagine any HTML-element as a box with centered content. If we want the "top left" position of its content we explicitly set that:

1
2
3
row-up-left
<div class="w-36 h-36 row-up-left"> <div>1</div> <div>2</div> <div>3</div> </div>
This gives us superpowers to create any layout that we want with ease.
Next page Installation