Explicit Item Placement with Grid Lines

When you want precise control over where grid items appear in your layout, you use explicit item placement. CSS Grid provides properties that allow you to specify exactly which grid lines an item should start and end on. The two main properties for this task are grid-column and grid-row. These properties work by referencing grid lines, which are the numbered lines that form the boundaries between grid tracks (rows and columns).

Understanding Grid Lines

• Grid lines are numbered starting from 1 at the top and left edges of the grid;
• Each row and column track is bounded by two grid lines: one at the start and one at the end;
• If your grid has three columns, it will have four vertical grid lines numbered 1 through 4; the same logic applies to rows.

Using grid-column and grid-row

• The grid-column property allows you to specify where an item should start and end horizontally by referencing the grid line numbers;
• The grid-row property does the same vertically;
• Use the shorthand syntax: grid-column: start / end; and grid-row: start / end;;
• To make an item span multiple tracks, set the end value to a higher grid line number.

Example:

• grid-column: 1 / 3; places the item starting at grid line 1 and ending before grid line 3 (spanning two columns);
• grid-row: 2 / 4; places the item starting at grid line 2 and ending before grid line 4 (spanning two rows).

Explicit item placement gives you full control over the position and size of your grid items, making it essential for complex layouts or when you need to highlight specific elements.

It is important to understand the distinction between implicit and explicit placement in CSS Grid. When you use explicit placement, you are telling the browser exactly where each item should go by assigning them to specific grid lines with grid-column and grid-row. This approach is best when you require a fixed layout or want to highlight certain elements by controlling their position and size directly.

On the other hand, implicit placement occurs when you do not specify grid line positions for items. In this case, the browser will automatically place items in the next available grid cells according to the order in the HTML and the grid's auto-placement algorithm. Implicit placement is convenient for dynamic content or when you do not need precise control over the layout.

Choose explicit placement when you want to:

• Control the exact position and span of grid items;
• Create complex, magazine-style layouts;
• Ensure consistency across different screen sizes.

Use implicit placement when you:

• Have a simple, uniform layout;
• Are working with dynamic or unknown numbers of items;
• Want to rely on the browser's automatic flow for efficiency.