Skip to main content

CSS Layout

Layout Methods​

Flexbox · Grid · Float · Position

Modern layout methods:

  • Flexbox: One-dimensional layouts
  • Grid: Two-dimensional layouts
  • Position: Absolute positioning

"CSS layout methods include Flexbox for one-dimensional layouts, Grid for two-dimensional layouts, and positioning for absolute placement."

Flexbox​

One-dimensional layout (row or column)

Flexbox is perfect for aligning items in a single direction (row or column).

Flexbox Properties

Container + Items

Container:

  • flex-direction: row/column
  • justify-content: main axis alignment
  • align-items: cross axis alignment
  • flex-wrap: wrapping

Items:

  • flex-grow: grow factor
  • flex-shrink: shrink factor
  • flex-basis: initial size
  • flex: Shorthand for flex-grow, flex-shrink, and flex-basis (e.g., flex: 1 lets an item grow and shrink as needed to fill space)

Basic Flexbox Example​

Flex Row (equal width items):

First item
Second item

Flex Column (full width items):

Item A
Item B
Key Concepts
  • flex: 1 means "grow to fill available space" and ensures siblings with the same setting share space evenly.
  • width: 100% stretches the item to the full width of its flex container (especially important in column layouts).

Common Flexbox Patterns​

Centering content:

Centered Content

Navigation bar:

Logo
HomeAboutContact

Card layout:

Card 1

This is a flex card that grows and shrinks.

Card 2

This is a flex card that grows and shrinks.

Card 3

This is a flex card that grows and shrinks.

Flexbox Use Cases

Use Flexbox for: navigation bars, centering content, card layouts, form layouts, and any one-dimensional alignment needs.

Grid​

Two-dimensional layout (rows + columns)

Grid provides precise control over both rows and columns simultaneously.

Basic Grid Example​

Item 1 (spans 2 columns)
Item 2
Item 3
Item 4
Item 5
Item 6

Common Grid Patterns​

3-column layout:

Sidebar
Main Content
Aside

Card grid:

Card 1

Auto-fill grid item

Card 2

Auto-fill grid item

Card 3

Auto-fill grid item

Card 4

Auto-fill grid item

Card 5

Auto-fill grid item

Card 6

Auto-fill grid item

Complex layout:

Header
Sidebar
Main Content
Aside
Footer
Grid Use Cases

Use Grid for: page layouts, complex 2D layouts, card grids, dashboard layouts, and when you need precise control over both rows and columns.

Flexbox vs Grid
  • Flexbox: One dimension (row OR column) - use for components
  • Grid: Two dimensions (rows AND columns) - use for page layouts
  • You can use both together (Grid for layout, Flexbox for components)

Responsive Design​

Media queries + flexible units

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
  • Mobile-first approach
  • Flexible units (%, rem, vw, vh)
  • Media queries for breakpoints

Grid Properties​

Template · Areas · Gap

Container:

  • grid-template-columns: column sizes
  • grid-template-rows: row sizes
  • grid-template-areas: named areas
  • gap: spacing between items

Items:

  • grid-column: column placement
  • grid-row: row placement
  • grid-area: area placement

"Grid provides template properties for defining layout and item properties for placement."

Position Property​

Static · Relative · Absolute · Fixed · Sticky

ValueBehavior
staticNormal flow (default)
relativeOffset from normal position
absolutePositioned relative to nearest positioned ancestor
fixedPositioned relative to viewport
stickySticks when scrolling

"Position property controls element positioning: static (default), relative (offset), absolute (positioned), fixed (viewport), sticky (scroll)."

Layout Best Practices​

✅ Use Flexbox for one-dimensional layouts ✅ Use Grid for two-dimensional layouts ✅ Use flexible units (fr, %, vw) ✅ Make layouts responsive ✅ Use gap instead of margins ❌ Don't use float for layout ❌ Don't use absolute positioning unnecessarily

🧠 Ultra-Short Cheat Sheet​

Flexbox (1D layout)
Grid (2D layout)
Position (absolute/fixed/relative/sticky)
Float (legacy, avoid)
Responsive (media queries)
Flexible units (fr, %, vw)
Gap for spacing