A Guide to the Auto-Placement Algorithm in CSS Grid

This tutorial details the CSS Grid Layout module's auto-placement algorithm, which positions elements based on the grid-auto-flow property. Previous articles covered CSS Grid basics, but this one focuses on the algorithm itself, explaining how elements end up in their final positions.

Key Concepts:

• The auto-placement algorithm, governed by grid-auto-flow (defaulting to row), positions grid items.
• It handles anonymous grid items (unstyled text directly within the grid container).
• Explicitly positioned elements (using grid-area) are placed first.
• Elements with defined row positions but undefined column positions are placed next, using either sparse (default) or dense packing.
• The algorithm determines the implicit grid's column count, expanding as needed to accommodate items with specific column positions or large spans.
• Finally, remaining items are positioned according to grid-auto-flow, using an auto-placement cursor that starts at the top-left of the implicit grid.

Understanding the Algorithm:

Before diving in, understand these core concepts:

• Anonymous Grid Items: Text within the grid container, not wrapped in tags, becomes an anonymous grid item. It can't be styled directly but inherits parent styles. Whitespace doesn't create anonymous items.
• Grid Spans: Unless specified, grid spans default to 1 (one cell).
• Implicit Grid: The grid defined by grid-template-rows, grid-template-columns, and grid-template-areas is the explicit grid. The implicit grid expands beyond this to accommodate items placed outside its bounds.

The following explanation assumes grid-auto-flow: row. For grid-auto-flow: column, swap "row" and "column" in the descriptions.

Step 1: Anonymous Grid Item Generation:

The algorithm begins by creating anonymous grid items from any text directly within the grid container. These are unstyleable but inherit parent styles.

Step 2: Placing Explicitly Positioned Elements:

Elements with explicitly defined positions using grid-area are placed first. The algorithm uses the grid-area values (start row, start column, end row, end column) to determine their location.

Step 3: Placing Elements with Set Row, Unset Column Positions:

Next, elements with specified grid-row-start and grid-row-end (but not column positions) are placed. The algorithm uses either sparse or dense packing:

• Sparse Packing (default): The element is placed in the earliest available column without overlapping existing items. It considers only items placed in this step, not earlier steps.

• Dense Packing (grid-auto-flow: row dense): The element is placed in the earliest available column, even if it means placing it before other items in the same row that were placed in this step.

(Sparse) (Dense)

Step 4: Determining Implicit Grid Column Count:

The algorithm determines the implicit grid's column count:

1. Starts with the explicit grid's column count.
2. Adds columns to accommodate items with defined column positions.
3. Adds columns if the largest column span among remaining items exceeds the current implicit grid width.

Step 5: Placing Remaining Items:

The auto-placement cursor (initially at the top-left) is used to position remaining items. Packing mode (sparse or dense) affects placement:

• Sparse Packing: The cursor moves across columns until a non-overlapping position is found. If no space is found in the current row, it moves to the next row.

• Dense Packing: The cursor resets to the top-left of the implicit grid for each item, finding the earliest available non-overlapping position.

(Sparse) (Dense)

Conclusion:

This detailed walkthrough clarifies the CSS Grid auto-placement algorithm. Experiment with different layouts to solidify your understanding. The FAQs section from the original text has been omitted for brevity, as the core algorithm explanation is already quite comprehensive.

The above is the detailed content of A Guide to the Auto-Placement Algorithm in CSS Grid. For more information, please follow other related articles on the PHP Chinese website!