Flexbox and grid in Webflow in No-Code - Mini Project: Build & Apply

Flexbox and Grid Layouts in Webflow

📖 Scenario: You are designing a simple webpage layout using Webflow. You want to arrange content boxes neatly using Flexbox and Grid layouts to make the page look clean and responsive.

🎯 Goal: Build a basic webpage layout in Webflow using Flexbox to align items horizontally and Grid to organize content in rows and columns.

📋 What You'll Learn

Create a container with three content boxes using Flexbox to align them horizontally with equal spacing.

Add a configuration to set the Flexbox container to center items vertically.

Create a grid layout with two rows and three columns inside another container.

Add final styling to the grid cells to have visible borders and padding.

💡 Why This Matters

🌍 Real World

Web designers use Flexbox and Grid in Webflow to build responsive and organized webpage layouts without writing code.

💼 Career

Understanding Flexbox and Grid in Webflow is essential for front-end designers and no-code developers to create modern, flexible web designs efficiently.

1

Create a Flexbox container with three content boxes

In Webflow, create a div element with the class flex-container. Inside it, add three div elements each with the class flex-item. This sets up the initial structure for a Flexbox layout.

No-Code

Need a hint?

Use the Webflow Designer to add a div block and assign the class flex-container. Then add three div blocks inside it with class flex-item.

2

Configure the Flexbox container to center items vertically

Select the flex-container in Webflow and set its display setting to Flex. Then set the Align Items property to Center to vertically center the three flex-item boxes.

No-Code

  Box 1
  Box 2
  Box 3

Need a hint?

In Webflow's Style panel, choose Flex for the container's display and set Align Items to Center.

3

Create a grid container with two rows and three columns

Add a new div with the class grid-container. Inside it, add six div elements each with the class grid-item. Then configure the grid-container in Webflow to have 2 rows and 3 columns.

No-Code

.flex-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}


  Box 1
  Box 2
  Box 3

Need a hint?

Use Webflow's grid layout option to set 3 columns and 2 rows for the grid-container. Add six child divs with class grid-item.

4

Add borders and padding to grid items

In Webflow, select all grid-item elements and add a 1px solid border and 1rem padding to each. This visually separates the grid cells and adds spacing inside them.

No-Code

.flex-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1rem;
  margin-top: 2rem;
}


  Box 1
  Box 2
  Box 3


  Cell 1
  Cell 2
  Cell 3
  Cell 4
  Cell 5
  Cell 6

Need a hint?

Use Webflow's Style panel to add a 1px solid border and 1rem padding to the grid-item class.