Welcome to

The CSS Grid

A collection of resources & tools to help you manage the Grid. Get started with:

CSS Grid Resource links

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 »

Stuff we made to help you learn Grid

We are pumped about CSS Grid and hope so are you. To help everybody transition into this new layout technique we created a nifty app with visual grid editor that you can try for free. The app is a great learning tool, yet most powerful when used with an understanding of the technique. For this we created the CSS Grid Guide. The guide is a never ending work-in-progress that combines code theory and explanations with real-world design examples and instructive demos.

Lastly we put together themes that show some layout muscle. You will quickly see that they are very different from the regular Bootstrap based web site, yet look great on any screen. Yup, they were crafted with the CSS Grid Editor in Site Designer app.

Don't get me wrong here, CSS Grid can totally be used together with frameworks such as Bootstrap and Foundation. However, you might not want to use them for managing your layout... CSS Grid will do a much better job at that.

Get off the grid, make interesting stuffs

Always starting with that 12 column layout? No? 18 or 24 then maybe? Forget that too. Place the content and make it look different than aaallllll the 12 in a dozen sites that follow the exact same structure. Because....with CSS Grid you can.

Sure, you gotta make things line up and all that, and with CSS Grid you can do that too. In short, absolutely adhere to the core principles of grid-based design, just don't be a total bore about it.

Time to get your grids on with the CSS Grid Editor (Site Designer) and the CSS Grid Guide!

Not only CSS Grid!

With Site Designer you have a lot of powerful design tools in your fingertips!


FEATURES

Custom Breakpoints Icon

Custom Breakpoints

View on Devices Icon

View on Devices

Typography Icon

Typography

Site Inspector Icon

Site Inspector

Design Tools Icon

Design Tools

· Custom Breakpoints ·

Why should your design capabilities stop at 1024px? Enjoy the freedom of custom breakpoints at any pixel width. Design and develop for ginormous or little itty bitty screens. Use them where you see fit to create the best responsive experience.

· View on Any Size Devices ·

Use Device View to preview your creation across various types of screens. This helps you test how your content will display on specific devices and determine if tweaks are needed. Popular devices are pre-loaded such as iPads, iPhones, Kindles, Galaxy phones and more. Modify your list to the devices of your choosing or enter custom Width and Height values. Use the toggler to change the orientation from portrait to landscape mode!

· Typography ·

Communicate effectively with intuitive editing controls. Pair the perfect font with a mixture of beautiful colors and enhancements.

· Site Inspector ·

The brilliant Site Inspector gives you an elaborate overview of the page content. Search terms to drill down to the element level, and review the CSS markup.

· Design Tools ·

The perfect collection of code-free CSS design controls combined with our signature CSS visual web development workflow.

CSS Grid Themes

Even our own designers are still discovering new design possibilities. The themes include text snippets that describe how the design & effects have been created. You can use them to learn, be inspired, or to jumpstart your very own creations. Hop over to our scroll-portfolio theme to marvel at the tricks Site Designer has to offer.

Browse the themes

Design. Build. Share

Design.
Build.
Share.

Start now & create epic websites!

Draft, design and develop your project all in one place.
Don’t worry about the code, Site Designer will write the perfect code for your content.

Try now for freeLearn More