Layout Helpers (Grid)

This page demonstrates the grid and image utility classes bundled with this UI. Use these helpers to build simple, responsive layouts quickly.

1. Quick Overview

Grid

.grid container with .grid-2, .grid-3, or .grid-4 for columns; add gaps with .gap-1, .gap-2, .gap-3.

Alignment

.items-start|center|end sets vertical alignment; .justify-start|center|end sets horizontal alignment for all items; use .justify-self-* on a single item.

Images

img-fluid (responsive), img-shadow (subtle depth), img-rounded (rounded corners); width helpers w-10, w-20, w-30, w-40, w-50, w-60, w-70; floats float-right and float-left.

2. Two‑Column: Text | Image

Clean two‑column layout

Use .grid.grid-2 to create two columns that collapse to one column on small screens. Add .items-center to vertically center content and justify-self-* to align a single cell.

  • Responsive: below 768px, columns stack.

  • Spacing: .gap-2 adds comfortable spacing between columns.

  • Image: img-fluid img-shadow img-rounded w-60 keeps it crisp and contained.

Sample image

3. Three Columns

Focused Short, scannable copy works best in compact cards.

Balanced Grids auto-fit at the breakpoint; keep content lengths similar.

Consistent Apply the same spacing and heading levels across cards.

4. Four Columns

Focused Short, scannable copy works best in compact cards.

Balanced Keep content lengths similar for even rows.

Visual Use concise visuals or icons to support text.

Consistent Apply the same spacing and heading levels across cards.

5. Figure with Caption

Medium image
Figure 1. Medium width image with shadow left aligned.
Medium image
Figure 2. Medium width image with shadow centered.
Medium image
Figure 3. Medium width image with shadow right aligned.

6. Float Right (small images)

Small image

Float an image right to let continuous text wrap around it. Prefer small widths (40–50%).

7. Tiny Images (10–30%)

Tiny image 10%
Tiny image 20%
Tiny image 30%

8. Usage Notes

  • Add role="img-fluid img-shadow" to images to make them responsive and add a subtle elevation.

  • Control image size with w-10 up to w-70.

  • Use .grid-2, .grid-3, or .grid-4 with .gap-2 for spacing; grids collapse to one column below 768px.

  • Align all items with .items- or .justify-; align a single item with .justify-self-*.