How to learn CSS layout

You surely need to check this website out: learnlayout.com

It’s a great resource created by @incompl and Isaac Durazo.

That’s all. Oh yes… and I just translated it to italian.

learnlayout is now available in Italian! http://t.co/wSXFaj7hZb

— Greg Smith (@_gsmith) April 22, 2014

wtf css layout - TL;DR

When I started studying CSS I remember that the most difficult thing to understand
was figure out how to use those cool selectors and properties to properly
reproduce great page layouts.

There are several positioning methods you can approach, mastering them surely
would take you much time.

Tricky names impossible to remember and awful results.

I clearly remember that I wanted a quick guide, a reference where to learn the CSS
layout, but nothing was there. A guide developers from all over the world could
use and start doing their work: create the layout they need.

If you are a frontend developer, or if you worked with them before,
you probably would know that:

• position has strange values
• fixed really does not fix your problems
• block is the opposite of inline
• margin not always works
• padding and width, they just mess everything up
• float … uh?

After few years of trying, creating static mockups, jsfiddles, pastebins and tons of
stackoverflow you probably will end up mastering all of them :)

I think learnlayout.com is a great resource, I know it will help future developers
to better understand the CSS and how to properly use it in order to achieve the desired layout.

learnlayout.com is straightforward, you can’t ask for better examples or explanation.
Not even MDN is so clear.