Defining grid columns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a grid container with 3 columns using Tailwind CSS.

Tailwind

<div class="grid [1] gap-4">
  <div class="bg-blue-500">Item 1</div>
  <div class="bg-green-500">Item 2</div>
  <div class="bg-red-500">Item 3</div>
</div>

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

Agrid-flow-col

Bgrid-rows-3

Cgrid-cols-3

Dgrid-cols-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-rows-3 instead of columns.

Using grid-flow-col which controls flow, not column count.

The class grid-cols-3 sets the grid to have 3 columns.

2fill in blank

medium

Complete the code to create a grid with 4 columns and a gap of 6 using Tailwind CSS.

Tailwind

<div class="grid [1] gap-6">
  <div class="bg-yellow-400">Box 1</div>
  <div class="bg-pink-400">Box 2</div>
  <div class="bg-purple-400">Box 3</div>
  <div class="bg-indigo-400">Box 4</div>
</div>

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

Agrid-cols-4

Bgrid-cols-2

Cgrid-cols-3

Dgrid-cols-5

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 3 or 5 columns instead of 4.

Confusing gap size with column count.

The class grid-cols-4 sets the grid to have 4 columns.

3fill in blank

hard

Fix the error in the code to correctly define a grid with 2 columns.

Tailwind

<div class="grid [1] gap-2">
  <div class="bg-gray-300">Cell 1</div>
  <div class="bg-gray-500">Cell 2</div>
</div>

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

Agrid-cols-1

Bgrid-cols-2

Cgrid-flow-row

Dgrid-rows-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-1 which creates only 1 column.

Using grid-rows-2 which sets rows, not columns.

The class grid-cols-2 correctly sets the grid to have 2 columns.

4fill in blank

hard

Fill both blanks to create a grid with 5 columns and a gap of 8 using Tailwind CSS.

Tailwind

<div class="grid [1] gap-[2]">
  <div class="bg-red-200">Item A</div>
  <div class="bg-red-400">Item B</div>
  <div class="bg-red-600">Item C</div>
  <div class="bg-red-800">Item D</div>
  <div class="bg-red-900">Item E</div>
</div>

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

Agrid-cols-5

B4

C8

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing gap size with column count.

Using wrong gap size numbers.

grid-cols-5 sets 5 columns and gap-8 sets the gap size to 8.

5fill in blank

hard

Fill all three blanks to create a responsive grid with 1 column on small screens, 3 columns on medium, and 6 columns on large screens.

Tailwind

<div class="grid [1] [2] [3] gap-4">
  <div class="bg-green-100">Box 1</div>
  <div class="bg-green-300">Box 2</div>
  <div class="bg-green-500">Box 3</div>
  <div class="bg-green-700">Box 4</div>
  <div class="bg-green-900">Box 5</div>
  <div class="bg-green-800">Box 6</div>
</div>

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

Agrid-cols-1

Bmd:grid-cols-3

Clg:grid-cols-6

Dsm:grid-cols-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using sm: prefix instead of md: or lg:.

Not setting the base grid-cols class.

The classes grid-cols-1, md:grid-cols-3, and lg:grid-cols-6 create a responsive grid with 1 column on small screens, 3 on medium, and 6 on large.

Practice

1. What does the Tailwind class grid-cols-3 do in a grid container?

easy

A. It adds 3 pixels of gap between columns.

B. It creates a grid with 3 rows.

C. It creates a grid with 3 columns.

D. It sets the grid to have 3 items only.

Solution

1. Step 1: Understand the class naming

   The class grid-cols-3 means setting the grid to have 3 columns.

2. Step 2: Differentiate columns from rows and gaps

   Rows are set by grid-rows-{number}, gaps by gap-{size}. So this class only sets columns.

3. Final Answer:

   It creates a grid with 3 columns. -> Option C

4. Quick Check:

   grid-cols-3 means 3 columns [OK]

Hint: Look for 'cols' to know it sets columns count [OK]

Common Mistakes:

• Confusing columns with rows
• Thinking it sets gaps between columns
• Assuming it limits number of items

2. Which of the following is the correct Tailwind class to create a grid with 4 columns?

easy

A. grid-cols-4

B. grid-rows-4

C. cols-grid-4

D. grid-column-4

Solution

1. Step 1: Recall Tailwind grid column syntax

   The correct syntax to define columns is grid-cols-{number}.

2. Step 2: Check each option

   Only grid-cols-4 matches the correct pattern. Others are invalid or set rows.

3. Final Answer:

   grid-cols-4 -> Option A

4. Quick Check:

   grid-cols-4 sets 4 columns [OK]

Hint: Remember: grid-cols-{number} sets columns [OK]

Common Mistakes:

• Using grid-rows instead of grid-cols
• Mixing order of words in class
• Using non-existent class names

3. What will be the visual layout of this HTML snippet with Tailwind classes?

<div class="grid grid-cols-2 gap-4">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

medium

A. One column with all boxes stacked vertically.

B. Three columns in one row with all boxes side by side.

C. Two rows with Box 1 and Box 2 stacked, Box 3 outside grid.

D. Two columns with Box 1 and Box 2 in first row, Box 3 alone in second row.

Solution

1. Step 1: Analyze grid columns and gap

   The class grid-cols-2 creates 2 columns. gap-4 adds space between grid items.

2. Step 2: Place boxes in grid

   Boxes fill columns left to right, top to bottom. Box 1 and Box 2 fill first row, Box 3 goes to second row alone.

3. Final Answer:

   Two columns with Box 1 and Box 2 in first row, Box 3 alone in second row. -> Option D

4. Quick Check:

   grid-cols-2 means 2 columns, items fill rows [OK]

Hint: Count columns, then fill items row-wise [OK]

Common Mistakes:

• Assuming all items fit in one row
• Ignoring gap spacing
• Confusing rows and columns

4. Identify the error in this Tailwind grid class usage:

<div class="grid grid-cols-">Content</div>

medium

A. Missing number after grid-cols- to specify columns.

B. grid-cols- is not a valid Tailwind class.

C. grid class should be grid-container instead.

D. Content should be inside a grid item div.

Solution

1. Step 1: Check the class syntax

   The class grid-cols- is incomplete; it needs a number to define how many columns.

2. Step 2: Confirm Tailwind requirements

   Tailwind requires a number after grid-cols- like grid-cols-3. Without it, the class is invalid.

3. Final Answer:

   Missing number after grid-cols- to specify columns. -> Option A

4. Quick Check:

   grid-cols- must have a number [OK]

Hint: Always add a number after grid-cols- [OK]

Common Mistakes:

• Leaving grid-cols- incomplete
• Using wrong class names
• Thinking grid-cols- alone works

5. You want a responsive grid that has 1 column on small screens and 4 columns on large screens using Tailwind. Which class combination achieves this?

hard

A. grid grid-cols-1 grid-cols-lg-4

B. grid grid-cols-1 lg:grid-cols-4

C. grid-cols-1 grid-cols-4-lg

D. grid grid-cols-4 sm:grid-cols-1

Solution

1. Step 1: Understand responsive prefixes

   Tailwind uses prefixes like lg: to apply styles on large screens and above.

2. Step 2: Apply correct classes for responsiveness

   Use grid-cols-1 for default (small screens) and lg:grid-cols-4 for large screens.

3. Step 3: Check options

   Only grid grid-cols-1 lg:grid-cols-4 uses correct syntax and order for responsive grid columns.

4. Final Answer:

   grid grid-cols-1 lg:grid-cols-4 -> Option B

5. Quick Check:

   Default 1 col, large screens 4 cols [OK]

Hint: Use responsive prefix like lg: before grid-cols [OK]

Common Mistakes:

• Reversing screen size prefixes
• Incorrect class order or syntax
• Using invalid class names