CSS Grid Basics

CSS Grid is one of the most powerful layout tools in modern web development, and Webflow gives you full control over it through the Designer.

What You'll Build

A simple grid layout with at least 2 columns. This could be a card grid, a feature section, or any content that benefits from a grid structure.

Instructions

1. Create Your Section

Start with a Section element. This gives your layout proper document structure and makes it easy to apply consistent padding.

2. Add a Container

Inside your section, add a Div Block that will serve as your grid container. Give it a class like layout_grid or card-grid.

3. Set Up the Grid

Select your grid container and set its Display to Grid in the Style panel. Configure:

• Columns: At least 2 columns
• Gap: Add some spacing between grid items (16px–24px is a good starting point)

4. Add Grid Items

Add at least 2 child elements inside your grid container. These can be Div Blocks, Cards, or any other elements.

5. Publish and Submit

Publish your Webflow site and paste the URL below to check your work.

Tips

• Use fr units for flexible column widths (e.g., 1fr 1fr for equal columns)
• Don't forget to add a responsive breakpoint — stack to 1 column on mobile
• Keep your class names clean and descriptive