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.