? CSS Layout

✨ Quick Overview

CSS Layout defines how elements are arranged on a page. Common layout modes include block, inline, flexbox, grid, float, and positioning. Understanding these helps you build clean, responsive, and accessible layouts.

? Key Concepts

Block elements take full width and start on a new line.
Inline elements flow within a line and take only needed width.
Flexbox is for one-dimensional layouts (row or column).
Grid is for two-dimensional layouts (rows and columns).
Positioning allows precise placement relative to flow or viewport.
Floats are legacy layout tools mainly used for text wrapping.

? Syntax / Theory

? Block vs Inline

Block elements occupy the full available width and push following content to a new line. Inline elements sit beside each other in the same line.

? View Code Example

/* Compare block and inline elements */
div {
  display: block;
}

span {
  display: inline;
}

Explanation

A <div> stretches across its container, while <span> boxes sit inline like words in a sentence.

? Flexbox Layout

Flexbox is ideal for centering items, creating navbars, and distributing space along a single axis.

? View Code Example

/* Horizontal flex layout with gaps */
.flex-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

Explanation

Children of .flex-container are placed in a row, centered both horizontally and vertically with equal gaps.

? Grid Layout

Grid lets you define rows and columns, making it perfect for dashboards, galleries, and full-page layouts.

? View Code Example

/* Three equal-width grid columns */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Explanation

The container is split into three equal columns. Each direct child automatically occupies one column cell.

? Positioning Basics

Positioning moves elements relative to their normal place or their container, useful for badges, overlays, or fine-tuning.

? View Code Example

/* Slightly offset a box from its normal spot */
.box-relative {
  position: relative;
  top: 10px;
  left: 20px;
}

Explanation

The element keeps its layout space but is visually shifted down and right, without affecting surrounding elements.

? Float Layout

Floats allow text to wrap around elements, such as images, but are less common for complex layouts today.

? View Code Example

/* Float a box left so text wraps around it */
.box-float {
  float: left;
  width: 30%;
  margin-right: 10px;
}

Explanation

The floated box hugs the left side, and text flows around it on the right. Remember to clear floats so parent elements wrap correctly.

? Tips & Best Practices

Use Flexbox for one axis (rows or columns) and simple component layouts.
Use Grid for full-page or complex two-dimensional layouts.
Combine layouts with @media queries to adjust for mobile, tablet, and desktop.
Prefer flexible units like %, fr, and auto over fixed pixel widths.
Keep the layout system consistent across a page (e.g., primarily flex or grid) to avoid confusion.
Use floats only when necessary and always clear them properly.

? Try It Yourself / Practice Tasks

Create a .flex-container with 4 boxes and center them horizontally with justify-content: center;.
Build a 2x2 grid using grid-template-columns: repeat(2, 1fr); and set a gap between items.
Make a notification badge using position: absolute; on a child inside a relatively positioned parent.
Float an image left and make a paragraph of text wrap around it. Then add a clearfix to the container.
Recreate any simple web layout (header, main, sidebar, footer) using CSS Grid with named areas.