Defining grid columns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the effect of this Tailwind CSS class?

Consider the following HTML snippet using Tailwind CSS:

<div class="grid grid-cols-3 gap-4">...</div>

What does the class grid-cols-3 do?

Tailwind

<div class="grid grid-cols-3 gap-4">Content</div>

A Creates a flex container with 3 items.

B Creates a grid container with 3 rows.

C Creates a grid container with 3 equal-width columns.

D Creates a grid container with 3 columns of fixed 3rem width.

💡 Hint

The class grid-cols-3 controls the number of columns in a grid layout.

The grid-cols-3 class in Tailwind CSS sets the grid container to have exactly 3 columns of equal width. It does not affect rows or flexbox behavior.

🧠 Conceptual

intermediate

How does Tailwind CSS define grid columns with different widths?

Which Tailwind CSS class would you use to create a grid with 4 columns where the first column is twice as wide as the others?

A grid-cols-[2fr_1fr_1fr_1fr]

B grid-cols-4 grid-cols-2

C grid-cols-4 grid-cols-auto

D grid-cols-4 grid-cols-fr

💡 Hint

Tailwind allows custom grid column sizes using square brackets with CSS values.

The class grid-cols-[2fr_1fr_1fr_1fr] uses Tailwind's arbitrary value feature to set the first column to 2 fractions wide and the others to 1 fraction each.

❓ selector

advanced

Which Tailwind class correctly creates a responsive grid with 2 columns on small screens and 4 columns on large screens?

Given the following options, which one will create a grid that has 2 columns on screens smaller than 1024px and 4 columns on screens 1024px and wider?

A grid grid-cols-2 md:grid-cols-4

B grid grid-cols-4 sm:grid-cols-2

C grid grid-cols-4 lg:grid-cols-2

D grid grid-cols-2 lg:grid-cols-4

💡 Hint

Tailwind uses prefixes like lg: to apply styles at certain screen sizes.

The class grid-cols-2 applies by default (small screens). The lg:grid-cols-4 applies when the screen is large (1024px+), changing columns to 4.

❓ rendering

advanced

What will be the visual layout of this grid container?

Analyze this HTML snippet:

<div class="grid grid-cols-3 gap-2">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

How will the items be arranged visually?

Tailwind

<div class="grid grid-cols-3 gap-2">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

A All items in one row: A B C D

B First row: A B C; second row: D alone in first column

C First row: A B; second row: C D

D First row: A B C D; second row empty

💡 Hint

The grid has 3 columns, so items fill rows left to right.

With 3 columns, the first 3 items fill the first row. The 4th item starts the second row in the first column.

❓ accessibility

expert

Which approach improves accessibility for a grid layout of images with captions?

You have a grid of images with captions inside a div using Tailwind grid classes. Which method best improves accessibility for screen readers?

A Use semantic <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> elements for each image and caption.

B Add <code>aria-label</code> to the grid container describing the images.

C Use <code>alt=""</code> on images and put captions in <code>&lt;span&gt;</code> elements.

D Wrap images in <code>&lt;div&gt;</code> with <code>role="gridcell"</code> but no captions.

💡 Hint

Semantic HTML elements help screen readers understand content better.

Using <figure> and <figcaption> pairs is the best semantic way to associate images with captions, improving accessibility.

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