CSS Grid Layout excels in arranging elements within a grid container. By defining grid items, you can precisely control their placement and alignment within the grid, making layout design both flexible and powerful.

Defining Grid Areas:

Grid items can be assigned to specific areas using grid-template-areas. This method allows for semantic naming of grid sections, enhancing readability and maintainability of your code.

Grid Row and Column Start/End:

With grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties, you can define the starting and ending positions of a grid item. This gives you granular control over the layout.

Span Multiple Cells:

To span an item across multiple cells, use the span keyword. For example, grid-column: span 2; will make the item stretch over two columns.

Aligning Grid Items:

Align items along the block axis using align-items and justify-items for the inline axis. These properties help center or distribute items within their grid area.

Using Grid Lines:

Grid lines can be explicitly named, allowing items to be placed relative to these names. This adds another layer of control over item positioning.


.grid-container {
    display: grid;
    grid-template-columns: 100px 200px;
    grid-template-rows: auto;
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}

.grid-item-header {
    grid-area: header;
}

.grid-item-sidebar {
    grid-area: sidebar;
}

.grid-item-content {
    grid-area: content;
}

.grid-item-footer {
    grid-area: footer;
}

Example Explanation:

In this example, we define a grid with three rows and two columns. The grid-template-areas property is used to assign names to each grid area, which are then referenced by the grid items.

Practical Use Case:

This structure is ideal for a basic webpage layout, where you have a header, sidebar, main content area, and footer. Each section can be styled independently while maintaining a cohesive grid structure.

Benefits:

Using grid-template-areas makes your CSS more readable and easier to maintain, especially when dealing with complex layouts.

Console Output:

Grid layout applied successfully.