CSS: Grid

CSS Grid Layout is a powerful two-dimensional layout system that allows you to create complex and responsive grid-based layouts with ease. It provides a more robust way to structure web pages compared to traditional methods like floats or positioning. Here's a comprehensive guide on using CSS Grid Layout:

Basic Concepts

Grid Container: The parent element becomes a grid container by applying display: grid;. This defines a new grid formatting context for its children.

Grid Items: Child elements inside a grid container become grid items. Grid items can be placed into specific grid cells or areas within the grid container.

Creating a Grid Container

To create a grid layout, define the grid container using display: grid;

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    grid-gap: 10px; /* Gap between grid items */
}

Grid Lines and Tracks

• Grid Lines: Lines that divide the grid into rows and columns.
• Grid Tracks: The space between two adjacent grid lines.

Example:

.grid-container {
    display: grid;
    grid-template-columns: 100px 1fr 2fr; /* Three columns: 100px, 1fr, and 2fr */
    grid-template-rows: auto 200px; /* Two rows: auto and 200px */
    grid-gap: 10px; /* Gap between grid items */
}

Placement of Grid Items

Using Line Numbers

.grid-item {
    grid-column: 2 / span 2; /* Starts at column line 2 and spans 2 columns */
    grid-row: 1; /* Occupies row 1 */
}

Using Named Areas

.grid-container {
    display: grid;
    grid-template-areas:
        "header header header"
        "main main sidebar"
        "footer footer footer";
}

.grid-item {
    grid-area: header; /* Places the item in the 'header' area */
}

Responsive Grids

You can create responsive grids using media queries to change the grid layout based on screen size:

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* Single column layout on smaller screens */
    }
}

Alignment and Spacing

Justify Content

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-around; /* Distributes columns evenly with space around */
}

Align Items

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    align-items: center; /* Vertically centers items within rows */
}

Grid Example

<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.grid-item {
    background-color: #eee;
    padding: 20px;
    text-align: center;
}

Browser Support

CSS Grid Layout is well-supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, older versions of Internet Explorer have limited support. Consider using fallbacks or polyfills for compatibility if needed.

CSS Grid Layout provides a flexible and powerful way to create complex layouts, handle responsive design, and manage alignment and spacing in web pages. Mastering CSS Grid Layout can greatly enhance your ability to create modern and visually appealing designs.