Welcome to Part 10 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS Grid Alignment, Spacing & Auto-placement.

Defining rows and columns sets up the structural grid track skeleton. However, to position elements inside those cells, adjust item gaps, align cells vertically/horizontally, and control how elements flow automatically when content mounts, you must master Grid’s placement and alignment properties.

---

Chapter 70: Grid Spacing (Gaps)

Like Flexbox, CSS Grid provides properties to set gaps between grid columns and rows without affecting border alignments:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* Modern shorthand: gap: [row-gap] [column-gap] */
  gap: 20px 15px;
}

• row-gap: Spacing between rows.
• column-gap: Spacing between columns.
• gap: Sizing shorthand. If 1 value is set (e.g. gap: 10px;), it applies to both rows and columns.

---

Chapter 71: Grid Line Placement (Line-based Positioning)

CSS Grid uses a coordinate system based on grid lines (the boundaries separating tracks). In a 3-column grid, there are 4 column lines:

 Line 1     Line 2     Line 3     Line 4
   │          │          │          │
   ├──────────┼──────────┼──────────┤
   │  Col 1   │  Col 2   │  Col 3   │
   ├──────────┼──────────┼──────────┤

71.1 Placing Items using Line Coordinates

You can position items manually by specifying which start and end lines they should touch:

• grid-column-start / grid-column-end
• grid-row-start / grid-row-end

.featured-card {
  grid-column-start: 1;
  grid-column-end: 3; /* Card stretches from Line 1 to Line 3 (spanning 2 columns) */
  grid-row-start: 2;
  grid-row-end: 3;
}

71.2 Shorthand Coordinate Syntax

/* Syntax: [start] / [end] */
.featured-card-shorthand {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

71.3 Negative Line Numbers

You can use negative numbers to reference grid lines starting from the opposite end:

• -1 is the last grid line.
• -2 is the second-to-last grid line.

/* Stretches the banner across the entire width of the grid, regardless of column count */
.full-width-banner {
  grid-column: 1 / -1;
}

---

Chapter 72: Spanning Tracks: The span Keyword

Instead of declaring the exact ending line coordinate, you can tell the element to span a specified number of tracks using the span keyword:

.card-wide {
  grid-column: 1 / span 2; /* Starts at Line 1, spans across 2 columns */
}

.card-tall {
  grid-row: span 3; /* Spans 3 rows, letting the auto-placement engine decide the start line */
}

---

Chapter 73: Grid Item Alignment (Cell Alignment)

These properties align individual grid items inside their assigned cells.

73.1 Align Items (align-items) & Justify Items (justify-items)

Declared on the grid container to set default alignment for all child cells:

• justify-items: Aligns items horizontally (Inline Axis): start, end, center, stretch.
• align-items: Aligns items vertically (Block Axis): start, end, center, stretch.

.grid-container {
  display: grid;
  justify-items: center; /* Center items horizontally in cells */
  align-items: center;   /* Center items vertically in cells */
}

73.2 Self-Overrides: justify-self & align-self

Declared on the grid item to override container alignments locally:

.special-card {
  justify-self: stretch;
  align-self: end;
}

---

Chapter 74: Aligning the Grid Tracks Content

If the total track dimensions are smaller than the grid container’s bounding box, you distribute empty track space using content properties:

• justify-content: Aligns tracks along the inline axis.
• align-content: Aligns tracks along the block axis.
• Values behave like Flexbox content properties: start, end, center, stretch, space-between, space-around, space-evenly.

---

Chapter 75: Auto-placement Algorithms (dense)

When you place items in a grid, the browser’s auto-placement engine automatically packs them into empty cells. If some items have large track spans (like a wide card spanning 3 columns), they might not fit on the current row, leaving empty “holes” in the layout.

The dense keyword forces the browser to scan back and fill in these layout holes with smaller subsequent items:

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Flows row-wise, but packs items densely to fill empty cells */
  grid-auto-flow: row dense;
}

---

Chapter 76: Grid Placement Practice & Self-Check

76.1 Practice Exercises

1. Exercise 1: Sidebar Sidebar Spanning: Position a sidebar on the left spanning 2 rows, next to a header and main feed.

   .sidebar {
     grid-column: 1 / 2;
     grid-row: 1 / -1; /* Spans top to bottom */
   }

2. Exercise 2: Gallery Packing: Create a dense photo gallery grid where featured photos span 2 cells.

   .gallery {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     grid-auto-flow: dense;
     gap: 10px;
   }
   .featured-photo {
     grid-column: span 2;
     grid-row: span 2;
   }

3. Exercise 3: Overlapping Cards: Place two elements into the same grid cell coordinates, layering one slightly offset.

   .grid-stack {
     display: grid;
     grid-template-columns: 1fr;
   }
   .base-card {
     grid-column: 1;
     grid-row: 1;
     z-index: 1;
   }
   .badge-overlap {
     grid-column: 1;
     grid-row: 1;
     justify-self: end;
     align-self: start;
     z-index: 2;
     margin-top: -10px;
   }

76.2 Self-Check Questions

1. What line number represents the final column line in a grid?
   • Answer: -1.
2. Which property adds spacing between grid cells?
   • Answer: gap (or row-gap/column-gap).
3. What does grid-column: 2 / 5 mean?
   • Answer: The item starts at column Line 2 and ends at column Line 5 (occupying 3 columns).
4. What does the span keyword accomplish?
   • Answer: It directs the item to stretch across a specified number of tracks instead of ending at a fixed line coordinate.
5. What is the difference between justify-items and justify-content in CSS Grid?
   • Answer: justify-items aligns the content inside individual grid cells. justify-content distributes empty space around the grid tracks within the container.
6. Does align-self work on grid containers or grid items?
   • Answer: Grid items (to override parent alignment).
7. What happens when grid-auto-flow is set to row dense?
   • Answer: The auto-placement engine packs smaller grid items into empty cells that were bypassed by larger items.
8. What is the default value of align-items in a grid?
   • Answer: stretch.
9. If a grid has 4 columns, how many grid lines are there?
   • Answer: 5 column lines.
10. Does gap include outer boundary margins?
    • Answer: No, it only spaces adjacent cell lines.
11. What coordinate layout is represented by grid-row: 1 / -1?
    • Answer: The item spans vertically from the first row line to the last row line (full height).
12. How is justify-self different from align-self?
    • Answer: justify-self aligns items horizontally (inline axis), whereas align-self aligns items vertically (block axis).
13. What coordinate system does span 3 start from if no start line is defined?
    • Answer: It defaults to the auto-placed coordinate line determined by the auto-flow engine.
14. Can you use grid-column-start without grid-column-end?
    • Answer: Yes, the browser will default to spanning exactly 1 column track.
15. Why does a grid layout collapse if align-items is set to start?
    • Answer: It stops elements from stretching to fill row heights, collapsing items to the height of their internal contents.
16. What is the difference between grid lines and grid tracks?
    • Answer: Grid tracks are the columns/rows themselves. Grid lines are the structural boundary lines that run on either side of the tracks.
17. Does grid-column: -1 / 1 compile as a valid coordinate?
    • Answer: No. Coordinates must list the start line first and the end line second; flipping them can break the item’s grid placement.
18. Why is justify-self: stretch ignored on elements with defined widths?
    • Answer: Explicit widths lock the element size, preventing it from stretching to fill the cell bounds.
19. Can you use negative row line numbers (like row: 1 / -1) inside implicit grids?
    • Answer: No. Negative line references are only valid inside explicit grids because the height coordinates of implicit grids are unresolved dynamically.
20. What does grid-column: span 2 / -1 mean?
    • Answer: The item ends at the final grid line (-1) and spans backwards across 2 columns.