CSS Grid

CSS Grid Layout is a powerful tool for creating complex, responsive web layouts. It provides a two-dimensional grid-based layout system, allowing you to create layouts using rows and columns.

Grid Container

The first step to using CSS Grid is to define a grid container. This is done by setting the display property to grid or inline-grid. All direct children of the grid container automatically become grid items.

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

.grid-item {
    background-color: lightblue;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

Grid Properties

Here are some key properties used in CSS Grid:

Property Description
display Defines the element as a grid container and establishes a new grid formatting context for its contents.
grid-template-columns Specifies the number and sizes of the columns in the grid layout.
grid-template-rows Specifies the number and sizes of the rows in the grid layout.
gap A shorthand property for the row-gap and the column-gap properties.
column-gap Specifies the gap between the columns.
row-gap Specifies the gap between the grid rows.
grid-column A shorthand property for the grid-column-start and the grid-column-end properties.
grid-column-start Specifies where to start the grid item.
grid-column-end Specifies where to end the grid item.
grid-row A shorthand property for the grid-row-start and the grid-row-end properties.
grid-row-start Specifies where to start the grid item.
grid-row-end Specifies where to end the grid item.
justify-items Aligns grid items along the inline (row) axis.
align-items Aligns grid items along the block (column) axis.
grid-template-areas Defines named grid areas that can be referenced by grid items.
grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.
grid-auto-flow Specifies how auto-placed items are inserted in the grid.
grid-auto-columns Specifies a default column size.
grid-auto-rows Specifies a default row size.
justify-content Aligns the grid container's items along the inline (row) axis.
align-content Aligns the grid container's items along the block (column) axis.
grid-template A shorthand property for the grid-template-rows, grid-template-columns, and grid-template-areas properties.
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties.
place-items A shorthand for align-items and justify-items.
place-content A shorthand for align-content and justify-content.

Defining Grid Template Columns and Rows

The grid-template-columns and grid-template-rows properties define the columns and rows of the grid. You can specify the size of each column and row using units like px, fr (fraction of available space), %, em, and more.

Example
Try yourself 
        
            .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 200px;
    gap: 10px;
}

.grid-item {
    background-color: lightgreen;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

Grid Gap

The gap property defines the space between the grid items. You can specify the gap for both rows and columns using grid-row-gap, grid-column-gap, or the shorthand gap.

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

.grid-item {
    background-color: lightcoral;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

Grid Areas

The grid-template-areas property allows you to define named grid areas within the grid container. Grid items can be assigned to these named areas using the grid-area property.

Example
Try yourself 
        
            .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: lightblue;
}

.sidebar {
    grid-area: sidebar;
    background-color: lightgreen;
}

.main {
    grid-area: main;
    background-color: lightcoral;
}

.footer {
    grid-area: footer;
    background-color: lightgoldenrodyellow;
}

.grid-item {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.header, .sidebar, .content, .footer {
     background-color: lightblue;
     border: 1px solid #ccc;
     padding: 10px;
     text-align: center;
}

Justify Items and Align Items

The justify-items and align-items properties control the alignment of grid items along the inline (row) and block (column) axes, respectively.

Example
Try yourself 
        
            .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
    height: 300px;
}

.grid-item {
    background-color: lightpink;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

Grid Line and Span

The grid-column and grid-row properties specify the size and location of a grid item within the grid column and row, respectively. You can use the span keyword to make an item span multiple columns or rows.

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

.grid-item {
    background-color: lightseagreen;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.grid-item.span-2 {
    grid-column: span 2;
}

Complete Example

Here is a complete example demonstrating a responsive grid layout using various CSS Grid properties:

Example
Try yourself 
        
            .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.grid-item {
    background-color: lightsteelblue;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}
CSS Grid is a versatile and powerful layout system that allows you to create complex, responsive web designs with ease. By understanding and utilizing the various properties and techniques discussed in this tutorial, you can harness the full potential of CSS Grid to create stunning layouts for your web projects.