Laying Things Out (Positioning & Structure)
Arrange items in a grid (like a checkerboard or photo album).
Skill ID: LayingThingsOut_7
Description: Create a structured layout of rows and columns for your items.
Where to apply: Photo galleries, product listings, team member showcases.
Key Tailwind Classes:
grid
,
grid-cols-3
,
gap-4
Gotcha:
Grid items fill only one "cell" by default. If you want an item to span multiple columns or rows, you need to use
col-span-2
or
row-span-2
on that specific grid item.
Example:
Here's how you might use these classes to create a simple 3-column grid with some spacing:
<div class="grid grid-cols-3 gap-4">
<div class="bg-indigo-200 p-4 rounded">Item 1</div>
<div class="bg-indigo-200 p-4 rounded">Item 2</div>
<div class="bg-indigo-200 p-4 rounded">Item 3</div>
<div class="bg-indigo-200 p-4 rounded col-span-2">Item 4 (spans 2 columns)</div>
<div class="bg-indigo-200 p-4 rounded">Item 5</div>
</div>Live Preview:
In the example,
grid
establishes the grid container.
grid-cols-3
defines a grid with three columns of equal width.
gap-4
adds a gap (spacing) between grid items.
"Item 4" uses
col-span-2
to take up the space of two columns, as mentioned in the "Gotcha".