CSS Advanced Layout

Modern CSS layout gives you powerful tools beyond floats and positioning. With Flexbox, Grid, and Multi-column layouts, you can build responsive and flexible designs with minimal code.

Flexbox (Flexible Box Layout)

Used for 1D layouts — aligning items in row or column.

🔹 Basic Setup

.flex-container {
  display: flex;
}

🔹 Common Properties

On the container:

display: flex;
flex-direction: row | column;
justify-content: flex-start | center | space-between;
align-items: stretch | center | flex-start;
flex-wrap: wrap;
gap: 1rem;

On children (items):

flex: 1;  /* grow/shrink */
order: 2;  /* change order */
align-self: flex-end;

✅ Example:

.tutorials-card-group {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

CSS Grid Layout

Used for 2D layouts — defining rows and columns.

🔹 Basic Setup

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
}

🔹 Key Grid Properties

grid-column: 1 / 3;
grid-row: span 2;
justify-items: center;
align-items: start;

✅ Grid Example

.tutorials-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

Flexbox vs Grid

💡 Use Flexbox for aligning items along a direction.
💡 Use Grid when you need full layout control.

CSS Multi-Column Layout

Used for flowing text into multiple columns (like newspapers).

.multi-column {
  column-count: 3;
  column-gap: 2rem;
}

Optional:

column-rule: 1px solid #ccc;

✅ Real Layout Example

.layout-area {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

.sidebar {
  background: #f5f5f5;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

✅ Summary Covered

• display: flex and all major Flexbox properties
• display: grid and template syntax
• Difference between Grid vs Flexbox
• Multi-column text layout
• Real layout code examples