Web Design & UX

CSS Grid

Quick Definition

CSS Grid is a two-dimensional layout system in CSS for arranging content in rows and columns simultaneously.

In context

Best for major page layouts (header, sidebar, main, footer arrangements). Combine with Flexbox (which is one-dimensional) for component-level layouts. Both replaced older float-based layouts.

Have a question this didn't answer?

Book a free 60-minute strategy call. We'll explain how this concept applies to your specific situation.

Book a Free Call Browse 50+ Detailed Answers

Related terms

Information Architecture (IA)

IA organizes content into logical structures that users can understand and navigate.

CRO (Conversion Rate Optimization)

CRO is the practice of increasing the percentage of visitors who take a desired action through systematic testing and design improvement.

Touch Target Size

Touch target size is the clickable / tappable area of an interactive element — for accessibility and mobile usability, recommended minimum is 48×48 CSS pixels with at least 8 pixels separation from adjacent targets.

Mockup

A mockup is a high-fidelity visual representation of a page, showing colours, typography, imagery, and final design — but not interactive.

Scroll Depth

Scroll depth measures how far down a page users scroll, often expressed as percentage milestones (25%, 50%, 75%, 100%).

Skeleton Loader

A skeleton loader is a placeholder UI that mimics the shape of the eventual content (grey blocks where text and images will appear) shown while the real content loads.

Back to all terms