CSS Grid allows two types of positioning for the elements in the grid: explicit and implicit. Understanding how both work will help you efficiently manage the arrangement of elements and solve design problems more effectively.

Explicit Positioning

Explicit positioning refers to the direct placement of elements in the grid using properties such as grid-column and grid-row. This allows you to specify exactly where an element begins and ends within the Grid.

grid-column and grid-row

The properties grid-column and grid-row define which lines the columns and rows of an element start and end at.

css

Explicit Positioning Example

html

In this example, Item 1 spans two columns and one row, while Item 2 spans two columns and is in the second row.

Implicit Positioning

Implicit positioning occurs when elements are automatically placed in the grid according to the document order and Grid flow rules. This is useful when you have a dynamic number of elements or when you don't want to manually specify each position.

grid-auto-rows and grid-auto-columns

The properties grid-auto-rows and grid-auto-columns define the size of rows and columns that are created implicitly.

css

grid-auto-flow

The property grid-auto-flow controls how elements are placed in the grid when explicit positions are not specified. The values can be row (default), column, row dense, and column dense.

• row: Elements are placed by rows.
• column: Elements are placed by columns.
• row dense and column dense: Use a more compact placement algorithm.

css

Implicit Positioning Example

html

In this example, the elements are automatically placed in columns according to the specific flow grid-auto-flow: column.

Conclusion

Understanding and utilizing explicit and implicit positioning allows you to have complete control over the arrangement of elements in CSS Grid. While explicit positioning offers precision and detailed control, implicit positioning makes it easier to manage layouts with a dynamic number of elements. Both are essential tools in creating modern and adaptable layouts.