Grid and column layout in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a 12-column grid in Figma.

Figma

frame.layoutGrid = [{ type: '[1]', count: 12 }]

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

Aframes

Brows

Cgrid

Dcolumns

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rows' instead of 'columns' for vertical grid layout.

Using 'grid' which creates a square grid, not columns.

In Figma, to create a column grid, you set the layoutGrid type to 'columns'.

2fill in blank

medium

Complete the code to set the gutter width between columns to 20 pixels.

Figma

frame.layoutGrid[0].[1] = 20

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

Amargin

BgutterSize

CcolumnWidth

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Setting 'margin' instead of 'gutterSize'.

Confusing 'columnWidth' with gutter size.

The property 'gutterSize' controls the space between columns in a Figma layout grid.

3fill in blank

hard

Fix the error in the code to set the grid type to rows instead of columns.

Figma

frame.layoutGrid = [{ type: '[1]', count: 8 }]

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

Arows

Bcolumns

Cgrid

Dframes

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the type as 'columns' when rows are needed.

Using 'grid' which creates a square grid.

To create a row grid, the type must be set to 'rows'.

4fill in blank

hard

Fill both blanks to create a grid with 6 columns and a margin of 24 pixels.

Figma

frame.layoutGrid = [{ type: '[1]', count: 6, [2]: 24 }]

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

Acolumns

Brows

Cmargin

DgutterSize

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rows' instead of 'columns' for vertical layout.

Confusing 'gutterSize' with 'margin'.

Use 'columns' for the grid type and 'margin' to set the outer space around the columns.

5fill in blank

hard

Fill all three blanks to create a 4-column grid with 16px gutter and 32px margin.

Figma

frame.layoutGrid = [{ type: '[1]', count: 4, [2]: 16, [3]: 32 }]

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

Acolumns

BgutterSize

Cmargin

Drows

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'rows' and 'columns'.

Swapping 'gutterSize' and 'margin' values.

Set type to 'columns', gutterSize to 16, and margin to 32 for the desired grid.