跳到主要内容

CSS Layout

Layout = positioning and arranging elements

Layout Methods​

Flexbox · Grid · Float · Position

Modern layout methods:

  • Flexbox: One-dimensional layouts
  • Grid: Two-dimensional layouts
  • Float: Legacy (avoid for layout)
  • 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)

.container {
  display: flex;
  flex-direction: row; /* or column */
  justify-content: center; /* main axis */
  align-items: center; /* cross axis */
}

"Flexbox provides one-dimensional layouts with powerful alignment and distribution capabilities."

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

"Flexbox has container properties (direction, justify, align) and item properties (grow, shrink, basis)."

CSS Grid​

Two-dimensional layout (rows + columns)

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

"CSS Grid enables two-dimensional layouts with precise control over rows and columns."

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)."

Float (Legacy)​

Avoid for layout, use for text wrapping

.float-left {
  float: left;
}
  • Legacy method
  • Use Flexbox/Grid instead
  • Still useful for text wrapping around images

"Float is a legacy layout method - use Flexbox or Grid for modern layouts, float only for text wrapping."

Common Layout Patterns​

Centering · Sidebar · Cards · Holy Grail

Centering:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Sidebar:

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

"Common patterns include centering with Flexbox, sidebar layouts with Grid, and card grids with Grid or Flexbox."

9️⃣ Responsive Layout​

Media queries + flexible units

.container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

"Responsive layouts use media queries with Flexbox/Grid and flexible units (fr, %, vw) to adapt to screen sizes."

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

"CSS layout methods include Flexbox for one-dimensional layouts with powerful alignment, Grid for two-dimensional layouts with precise control, and positioning for absolute placement. Flexbox uses container and item properties. Grid uses template and placement properties. Float is legacy - use Flexbox/Grid. Combine with media queries for responsive layouts."

🧠 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