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

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

learncss.com homepage


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

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 opposit 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 undestand 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.