Flexbox and grid in Webflow in No-Code - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a container to use Flexbox layout.

No-Code

<div style="display: [1];">
  <p>Item 1</p>
  <p>Item 2</p>
</div>

Drag options to blanks, or click blank then click option'

Aflex

Bblock

Cgrid

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using display: block; which is default and not Flexbox.

Using display: grid; which is for grid layout, not Flexbox.

Setting display: flex; makes the container use Flexbox layout, arranging child items in a flexible row or column.

2fill in blank

medium

Complete the code to create a grid container with two columns.

No-Code

<div style="display: grid; grid-template-columns: [1];">
  <div>Box 1</div>
  <div>Box 2</div>
</div>

Drag options to blanks, or click blank then click option'

A1fr 1fr

B100px 200px 300px

Cauto auto auto

Drepeat(3, 1fr)

Attempts:

3 left

💡 Hint

Common Mistakes

Using three values when only two columns are needed.

Using fixed pixel widths instead of flexible fractions.

grid-template-columns: 1fr 1fr; creates two equal columns in the grid container.

3fill in blank

hard

Fix the error in the Flexbox container to center items horizontally.

No-Code

<div style="display: flex; justify-content: [1];">
  <div>Centered Item</div>
</div>

Drag options to blanks, or click blank then click option'

Astart

Bcenter

Cspace-between

Dflex-end

Attempts:

3 left

💡 Hint

Common Mistakes

Using start which aligns items to the left.

Using space-between which spreads items apart.

Using justify-content: center; centers the flex items horizontally inside the container.

4fill in blank

hard

Fill both blanks to create a grid with three equal columns and a gap between them.

No-Code

<div style="display: grid; grid-template-columns: [1]; gap: [2];">
  <div>Box A</div>
  <div>Box B</div>
  <div>Box C</div>
</div>

Drag options to blanks, or click blank then click option'

Arepeat(3, 1fr)

B10px

C20px

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed widths instead of repeat with fractions.

Setting gap to zero or forgetting it.

grid-template-columns: repeat(3, 1fr); creates three equal columns.
gap: 20px; adds space between grid items.

5fill in blank

hard

Fill all three blanks to create a Flexbox container that stacks items vertically and centers them vertically.

No-Code

<div style="display: [1]; flex-direction: [2]; justify-content: [3];">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Drag options to blanks, or click blank then click option'

Agrid

Bflex

Ccenter

Dcolumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using display: grid; instead of flex.

Using flex-direction: row; which stacks horizontally.

Setting display: flex; activates Flexbox.
flex-direction: column; stacks items vertically.
justify-content: center; centers items vertically along the main axis.