Liberate your layout Layout done right

Using 'grid' for layout is the hottest new design technique that has come to the web in years. And for good reason, ever since the early days of the web world, layout creation has been cumbersome. A fact only amplified by the responsive revolution where layouts have to be adjusted depending on the available screen width. Luckily CSS Grid is the final answer to all the old layout hacks and inconveniences.

Pixel precision is back!

With Grid Layout, content can be placed explicitly and precisely in grid containers. These containers can also be nested — the child grid containers can be easily be arranged within their parent grid container.

Easily rearrange layouts for different screens

With media queries, the elements (and 'element containers') can be easily repositioned to accommodate for different display sizes. We made a short video showing a full-blown layout change using line-based placement. What's really cool is that the entire rearrangement you see below took me less than 10 minutes!

Get started today

The CoffeeCup team has been busy creating tools and tuts that help you get started with CSS Grid and turn you into a Grid Pro soon. They are all available on this site, go here to read more about it »