Premium CSS Course

CSS Grid

CSS Grid Layout is a two-dimensional layout system for the web. It enables you to design web pages with rows and columns, giving you control over both horizontal and vertical positioning. With CSS Grid, you can create complex layouts with ease and flexibility.

What is CSS Grid?

CSS Grid allows you to divide a webpage into a grid of rows and columns. You can control the placement of elements inside the grid and define how they span across different grid areas. This is especially useful for creating responsive, multi-column layouts without the need for floats or complex CSS techniques.

Creating a Grid Container

To create a grid layout, you need to define a grid container. This is done by setting the parent element’s display property to grid.

        .container {
            display: grid;
        }
    

Once the grid container is set, its child elements (grid items) will automatically be placed in the grid.

Grid Container Properties

Here are some important properties for configuring a grid container:

• grid-template-columns: Defines the number and size of columns in the grid. You can set fixed, flexible, or percentage-based sizes for columns.

            .container {
                grid-template-columns: 1fr 2fr 1fr;
            }
        

This example creates a grid with three columns, where the middle column is twice as wide as the other two.

• grid-template-rows: Defines the number and size of rows in the grid, similar to grid-template-columns.

            .container {
                grid-template-rows: 100px auto 100px;
            }
        

This sets the first and last rows to be 100px tall, and the middle row will take up the remaining space.

• grid-template-areas: Allows you to define named grid areas that you can reference in your grid items.

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

This property allows you to visually define your layout using named areas.

• gap: Adds spacing between grid items. You can set both row and column gaps using gap, row-gap, and column-gap.

            .container {
                gap: 20px;
            }
        

• justify-items: Aligns grid items along the inline (horizontal) axis within their grid cell. Common values include start, end, center, and stretch.

            .container {
                justify-items: center;
            }
        

• align-items: Aligns grid items along the block (vertical) axis within their grid cell. It uses similar values to justify-items.

            .container {
                align-items: stretch;
            }
        

Grid Item Properties

CSS Grid also provides properties for controlling the positioning of grid items within the grid container.

• grid-column: Specifies how many columns a grid item should span. You can define the start and end positions of the item in the grid.

            .item {
                grid-column: 1 / 3;
            }
        

This makes the grid item span from the first column to the second column.

• grid-row: Similar to grid-column, but for controlling the vertical position of grid items within rows.

            .item {
                grid-row: 1 / 3;
            }
        

This makes the grid item span from the first row to the second row.

• grid-area: Defines the position of a grid item by referring to grid lines or named grid areas.

            .item {
                grid-area: header;
            }
        

If you used grid-template-areas in the grid container, you can refer to the named areas here.

Example of Grid Layout

Here’s an example of a simple grid layout with a header, sidebar, content area, and footer:

        .container {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto 1fr auto;
            gap: 20px;
            grid-template-areas:
                "header header"
                "sidebar content"
                "footer footer";
        }

        .header {
            grid-area: header;
            background-color: #f0f0f0;
        }

        .sidebar {
            grid-area: sidebar;
            background-color: #d0d0d0;
        }

        .content {
            grid-area: content;
            background-color: #e0e0e0;
        }

        .footer {
            grid-area: footer;
            background-color: #f0f0f0;
        }
    

This creates a layout where the header spans the full width of the grid, the sidebar takes the left column, and the content fills the remaining space. The footer spans the full width at the bottom.

Best Practices for Using CSS Grid

• Use Grid for complex layouts: CSS Grid is ideal for two-dimensional layouts. For simpler one-dimensional layouts, Flexbox is often a better choice.
• Don’t over-complicate your grid: Keep your grid structure simple and only add complexity when needed. Avoid nesting too many grids or excessive grid areas.
• Ensure accessibility: Make sure your grid layout doesn’t interfere with accessibility. Ensure that screen readers can interpret the layout correctly.
• Test across browsers: While CSS Grid is widely supported in modern browsers, always test your layout in older browsers and on various devices to ensure compatibility.