Lesson Content

Why CSS Grid?

CSS Grid is a powerful two-dimensional layout system, allowing you to control columns and rows simultaneously. It’s more intuitive for complex layouts than older techniques (floats, positioning, or even Flexbox, which is primarily one-dimensional).

Key Concepts

Grid Container & Grid Items
- Turn an element into a grid container by setting display: grid;.
- Direct children of that container become grid items.
Defining Rows & Columns
- grid-template-rows and grid-template-columns specify the number and sizes of rows/columns.
- Example:

css
Copy code
.grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr;
}

- - Creates 2 rows (first 100px high, second 200px)
  - And 2 columns (first column is 1 fraction unit, second is 2 fraction units).

Grid Tracks & Gaps
- Tracks: The horizontal or vertical lines bounding rows and columns.
- gap (or row-gap, column-gap) property sets space between grid items (e.g., gap: 1rem;).
Fraction Units (fr)
- fr is a flexible unit representing a portion of available space.
- Helps create fluid layouts without fixed pixel widths.
Implicit vs. Explicit Grid
- Explicit: Defined using grid-template-rows / grid-template-columns.
- Implicit: Rows or columns automatically created by the browser if not explicitly defined.
- You can control how implicitly created tracks are sized using properties like grid-auto-rows and grid-auto-columns.
Placing Items
- By default, items flow into the grid from left to right, top to bottom.
- You can explicitly position items with properties like grid-row, grid-column, or the shorthand grid-area.

Day 11: CSS Grid Basics—Rows, Columns, and Grid-Template