Masonry-style grid in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a container with Tailwind CSS that centers content horizontally.

Tailwind

<div class="[1]">
  <!-- Masonry grid will go here -->
</div>

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

Amx-auto

Btext-center

Cp-4

Dbg-gray-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-center which centers inline text, not block containers.

Using padding or background color classes which don't center content.

The class mx-auto centers the container horizontally by setting automatic left and right margins.

2fill in blank

medium

Complete the code to create a masonry grid container using Tailwind CSS with 3 columns on medium screens.

Tailwind

<div class="[1] gap-4">
  <!-- grid items -->
</div>

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

Amd:columns-3

Bcolumns-2

Clg:grid-cols-4

Dgrid-rows-3

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using columns-2 which sets 2 columns instead of 3.

The class md:columns-3 sets the CSS columns layout to have 3 columns starting at medium screen sizes.

3fill in blank

hard

Fix the error in the Tailwind class to make the grid items flow in a masonry style using CSS columns.

Tailwind

<div class="[1] gap-4">
  <!-- grid items -->
</div>

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

Aflex flex-wrap

Bgrid-cols-3

Ccolumns-3

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-3 which creates a grid but not masonry flow.

Using flex flex-wrap which arranges items horizontally.

The class columns-3 uses CSS columns to create a masonry effect by flowing items vertically.

4fill in blank

hard

Fill both blanks to create a responsive masonry grid with 2 columns on small screens and 4 columns on large screens.

Tailwind

<div class="[1] [2] gap-6">
  <!-- items -->
</div>

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

Acolumns-2

Bcolumns-4

Csm:columns-2

Dlg:columns-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-responsive classes without prefixes.

Mixing grid and columns classes which behave differently.

sm:columns-2 sets 2 columns on small screens, and lg:columns-4 sets 4 columns on large screens for responsive masonry.

5fill in blank

hard

Fill all three blanks to style masonry grid items with a white background, rounded corners, and shadow.

Tailwind

<div class="[1] [2] [3] p-4 mb-4">
  <!-- item content -->
</div>

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

Abg-white

Brounded-lg

Cshadow-md

Dtext-gray-700

Attempts:

3 left

💡 Hint

Common Mistakes

Using text color classes instead of background or shadow classes.

Forgetting to add padding or margin for spacing.

The classes bg-white, rounded-lg, and shadow-md style the items with white background, rounded corners, and medium shadow respectively.