CSS Layout and Responsive Design
Flexbox, Grid and the tools that make pages work on every screen size.
This is an overview — pick a sub-topic below.
Sub-topics (16)
Flexbox
One-dimensional layout along a row or column with flexible sizing and alignment.
CSS Grid
Two-dimensional layout with rows and columns.
Multi-Column Layout
Flow text into newspaper-style columns: `columns: 3 18rem;`.
Normal Flow
The default layout: block boxes stack vertically, inline content flows in lines.
Float
Push an element left or right so text wraps around it.
Clear
Stop elements from wrapping beside earlier floats: `clear: both`.
Media Queries
Apply styles based on viewport size, orientation, colour scheme or input type.
Container Queries
Style a component based on its container's size rather than the viewport.
Responsive Design
One site that adapts to phones, tablets and desktops.
Fluid Typography
Font sizes that scale smoothly with viewport width.
Viewport Units
`vw`, `vh` and the newer `svh`/`lvh`/`dvh` (small/large/dynamic viewport) units.
Aspect Ratio
`aspect-ratio: 16 / 9;` keeps a box's proportions as it resizes.
object-fit
How an image or video fills its box: `cover` (crop), `contain` (letterbox), `fill`, `none`.
Logical Properties
Direction-aware properties: `margin-inline`, `padding-block`, `inset-inline-start`, `inline-size`.
Writing Modes
Horizontal or vertical text flow: `writing-mode: vertical-rl;`.
Sticky Positioning
`position: sticky; top: 0;` keeps an element in view while scrolling within its container.
Spotted a mistake or want to add detail? Suggest an improvement — Content Contributors' edits are reviewed by editors before they go live.
Discussion (0)
Sign in or join free to ask questions and discuss this topic.