Using Layout Grids in Webflow
Grids are an essential tool for creating layouts that adapt seamlessly across different devices. They also offer a flexible solution for designing more complex or unconventional layouts.
In Webflow, the Grid element mirrors the functionality of CSS grid, providing a great set of tools to easily build responsive and dynamic grids.
This article is a short exploration into how you can use grids in Webflow to streamline your design process, especially layouts, saving both time and effort.
How Grids work in Webflow
The grid element is actually super simple to use. As default, it gives you a normal grid with 2 columns and 2 rows with a 16px gap (read more about the Webflow grid over here).
All settings for the grid can be found in the right hand settings panel. Here you can basically change any CSS property, similarly to a “real” CSS grid, only much simpler to use and understand.
My layout grid
In every project I do, I usually have a single layout grid. This grid usually has 12 columns and 0 rows (all needed rows gets auto-generated) on the desktop breakpoint, giving me everything I need to build cool layouts.
If you look at the screenshot above, you can see that my columns all have a Min/Max of 0.5 REM to 1FR.
This is done so that all columns can “fit” horizontally inside whatever contains they exists in while taking up at least 0.5 REM in width.
The settings for the size of each column can be changed by clicking each individual column in the settings (see image below).
Making the grid responsive
If you’ve ever seen other tutorials on using layout grids, having the columns span down on smaller breakpoints is often mentioned.
This isn’t really needed, since you’re totally able to use a 12-column grid on any breakpoint, but it definitely simplify things.
For my layout grids, I usually use the following columns:
- 12 columns on desktop
- 8 columns on tablet
- 4 columns on mobile landscape
- 4 (or 2) columns on mobile
Changing column amount between breakpoints
Changing the amount of default columns between breakpoints is super-simple. Simply select your breakpoint and delete any number of columns in your layout grid class.
Keeping grid layouts responsive
The easiest way of keeping your grid based elements responsive is to simply drag your elements by the corner and give them the amount of columns that they need (see image below).
If your layout is more complex with multiple elements inside a single grid for example, you can also give individual elements their column & row positions using the settings to the right in the designer.
Giving elements a custom grid column position
The cool thing about grids is that you’re able to give any element their own custom position, making it super easy to build more complex layouts.
For example, in the image below, I wanted to place my element between column 4 and 10.
If you look at the grid settings in the image below, you can see that the element indeed is placed between column 4 and 10.
The same element wraps down on the tablet breakpoint to span between column 1 and 7, taking up almost the full width of the grid.
Layout grids help layouts stay consistent
By sharing my grid class between multiple grids on a page, I’m able to create layouts that stay in a consistent “place” on the page, even if they’re placed in separate grids.
Another example of this is the image placed in the layout grid below, which starts at column 4 but spans all the way to column 12.
Conclusions
If you’re interested in learning more about the technical parts of using grids in Webflow, make sure to take a look at the official documentation.
Hopefully this short guide helped you out on whatever project(s) you’re working on. Grids, and especially grids used for layouts, are a great tool to level up as both a designer and a developer.
Feel free to check out my templates on the Webflow marketplace. And also feel free to follow me on Instagram and YouTube, I’m posting some cool stuff over there (mostly related to Webflow, design & illustrations).
