As we see in photography’s rule of thirds and on the front page of every newspaper, grids provide a visual logic that brings order to layout, especially in web design.
CSS grid used to be a pain to put together, even if you were familiar with CSS. Webflow's CSS grid feature makes it easy to tackle this design technique — even without knowing how to code. Check out these 12 designs, all made in Webflow, that harness the design power of CSS grid.
A great way to learn a new design practice is to apply it to a personal project. The stakes are low and it gives you a chance to understand the process before you dive in and start using it in your client work.
This Straw Dogs website is just a landing page that points to the Wikipedia page of this 1971 film (which inspired Tarantino’s Reservoir Dogs), but it’s a good example of starting small.
This site features a grid with seven columns (a narrow column bookends each side) and five rows. There are also div blocks within the grid for the larger block letters, lines, and shapes that make up the layout. Take a closer look at how this was put together in the Webflow Designer.
Grid also works beautifully for responsive design, as you can manually reposition elements as needed — right on the canvas! — for each screen size.
2. Japanese grid
Grids are everywhere you look. This Japanese-styled grid was inspired by a display wall in a retail space. It mimics shelving, translating a real-world layout into a digital design. Next time you notice a grid — snap a photo and use it for inspiration in your own design work.
Okay, we've mentioned how CSS grid anchors elements to both horizontal and vertical positions. So why not have some fun and take advantage of the grid to create some retro-styled graphics? This smiley face is both big pixel nostalgia and an example of CSS grid.
The image is just a 15 x 15 grid, referred to as “boxes” in the design. Each box has a different background color indicated by its combo class. This might sound difficult, but it’s really not — check out the Webflow University tutorial on combo classes.
Feeling inspired to express yourself through pixels? Clone this grid-based design as a template for your own 8-bit creations.
4. Grid masterclass
Claiming that your grid is a “masterclass” is a pretty bold statement. And if you're thinking about using CSS grid on your own, grid masterclass is a great place to begin your studies.
Though it looks like there’s a lot going on in this design, it’s not complicated — it’s just a 4 x 4 grid with div blocks containing the images and text. The divs vary in the number of spaces they occupy, creating a variety of content block sizes. Pretty easy, right?
As a fan of both CSS grid and the psychedelic, fusion-inspired music of The Soft Machine, I was excited to see this pop up in the showcase.
This design is based on a 4 x 3 grid. As seen in the previous example, div blocks are used. The div blocks contain the images and textures that make up the graphics. Div blocks are also used for elements like the LISTEN NOW animation and the band description on the bottom left.
This is looking a bit like the Mondrian grid above, right? But here the colors change as a mouseover effect swivels its position. Color Blocks brings some movement to the CSS grid.
Though this design packs a huge visual punch, it’s based on a simple 8 x 8 grid. The shifting colors from green to blue are a timed action that can be set up with Webflow interactions. The hover animation is created with Webflow transitions and transforms. All these dynamic elements are simple to set up.
Though we can’t verify the science behind the claim that healthy grids equal healthy websites, Grids and veggies certainly makes a strong case for correlation.
The rows in the 4 x 3 grid each have a different width. The text block with “Healthy Grids = Healthy Websites” is in a div block within the grid and uses an interactive ease effect that shifts it into place.
Modernist CSS grid is another another CSS grid experiment informed by minimalist art. Karl Benjamin’s Abstraction #9 is the muse behind this design. Much like the Mondrian grid and the video-game-inspired CSS grid example mentioned earlier, this design is pulled off by painting with pixels. Each frame of this 10 x 6 grid is made with orange, purple, yellow, or red div blocks.
The main elements of this design are held by a 3 x 1 grid. That's it — three columns and one row. There’s a flexbox tucked inside the grid for the “That's us” block of content on the left. And tucked inside the far-right column are three accordion rows. Interactions add a nice touch to this straightforward design.
Comics are all about grids. Each panel is a single frame in the visual narrative. This design recreates the feel of a comic-book page. Each panel is part of a 5 x 4 grid that uses custom CSS to accomplish the clip paths.
CSS grid gives you the power to add structure to your design, create responsive layouts, and fix elements to horizontal and vertical positions.
If you've ever felt intimidated by CSS grid, building grid layouts in Webflow is a great place to start. We encourage you to jump in and start experimenting. If you have any questions, we’d love to answer them in the comments below.