Column spanning in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does col-span-2 do in Tailwind CSS grid layout?

It makes a grid item stretch across 2 columns instead of just 1, allowing it to take more horizontal space.

beginner

How do you make a grid item span all columns in a 4-column grid using Tailwind?

Use col-span-4 to make the item cover all 4 columns.

beginner

Why is column spanning useful in web layouts?

It helps create flexible designs by letting some items take more space, like a headline spanning multiple columns.

beginner

Which Tailwind class would you use to make a grid item span 3 columns?

You would use col-span-3.

intermediate

Can column spanning affect responsive design? How?

Yes. You can change column spans at different screen sizes using responsive prefixes like sm:col-span-2 to adjust layout on small screens.

What does the Tailwind class col-span-1 do?

A Adds a 1rem margin

B Spans the grid item across all columns

C Makes the grid item invisible

D Spans the grid item across 1 column

col-span-1 means the grid item takes up exactly one column in the grid.

If you want a grid item to cover 3 columns in a 4-column grid, which class do you use?

A col-span-3

B col-span-2

C col-span-4

D col-span-full

col-span-3 makes the item span 3 columns.

How can you make a grid item span 2 columns only on medium screens and above?

A md:col-span-2

B col-span-md-2

C col-span-2-md

D medium:col-span-2

Tailwind uses prefixes like md: to apply styles on medium screens and larger.

What is the default column span if you do not specify any col-span class?

A 0 columns

B 2 columns

C 1 column

D All columns

By default, grid items span 1 column unless changed.

Which Tailwind utility controls how many columns a grid container has?

A col-span-{number}

B grid-cols-{number}

C grid-rows-{number}

D gap-{number}

grid-cols-{number} sets the number of columns in the grid container.

Explain how column spanning works in Tailwind CSS and why it is useful in layouts.

Think about how grid items can take more space horizontally.

Describe how you would make a grid item span different numbers of columns on small and large screens using Tailwind.

Use prefixes before col-span to change spans at breakpoints.