This is the most powerful layout system for sites available for designers. You can essentially place items anywhere on your canvas, and easily shuffle them around for different displays.
We combined the cutting edge CSS Grid layout technique with our signature visual site design workflow, and sprinkled in fallback-first controls for Flexbox. This world premiere is sure to unleash sites with unique content arrangements.
Kick off your projects using our chic themes. Each design is 100% customizable to meet your needs.
They make a great learning tool too. Gain a better understanding of how site items are arranged using the app's Element pane. With it you can inspect the page structure and see what styles are applied to each element.
Download ThemesVisual learners you will love watching the training videos put together by our teammate, Bob, the 'CSS Grid Builder'. Each episode is narrated covering various grid topics.
Watch the videosWe just couldn't wait to implement Grid on our website. The CoffeeCup homepage received the high honor of being the first page refreshed using the technique.
CSS Grid is great for a modular design approach, updating section by section, instead of overhauling the page at once. We documented the design process of the hero section of our homepage. This includes code examples too if you're curious about the markup structure.
In a two-part series, you'll learn how the grid was applied to the hero section, plus see how fallback styles using Feature Queries are used to serve a friendly layout for IE viewers.
Learn how we did it