03 Grid LayoutUI 2023-2024

GRID Layout

The CSS Grid Layout Module provides a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Grid Layout enables to you:

Divide a page into major regions or defining the relationship in terms of size, position, layer, and space between elements.
Align items both as columns and rows

Basic concepts

The space is divided into as many columns or rows as you want and specify their sizes without the content elements definition.

Properties

grid-template-columns and grid-template-rows

These properties define the number of columns or rows in the grid layout and can set the width of each column or row respectively.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 30px 50px 30px
}

In this example, the grid has four equally-sized columns and three rows, with heights of 30px, 50px, and 30px.

codepen example grid

There are a lot of values possible:

name: The name of the section
length: The size of the section
percentage: The size of the section relative to the inline grid container <0-100>%
flex: The size in fr units. Each unit represents a division of the remainder space and take the proportional space. <number>fr
auto: Represent the largest max-content size of the items and the minimum size of items in the track
repeat(<number of times>, <value>)

grid-template-areas

This property allows to specify named grid areas, establishing the cells in the grid and assigning them names.

.grid-container {
    display: grid;      
    grid-template-areas: "header header header"
                         "nav col1 col1"
                         "nav footer footer";
    grid-template-rows: 1fr 3fr 30px;
    grid-template-columns: 2fr 50% 1fr;
}

Note that the number of rows/columns must match in the grid-template-areas and in the grid-template-rows/columns.

HEADER

COL1

grid-template

This property works as a shorthand property for defining grid columns, rows, and areas.

.grid-container {
        display: grid;
        /*grid-template-rows/grid-template-columns*/
        grid-template: 1fr 1fr 1fr 1fr / 30px 50px 30px;
}

Grid Child

grid-row-start and grid-column-start

These properties specify a grid-item start position. The possible values are:

auto: This keyword indicates that the property contributes nothing to the grid item’s placement, indicating auto-placement
<custom-identify>: the name of the space that was created with the grid-template-areas
<span n>: Specifies the number of columns the item will span
<number>: Specifies on which column to start the display of the items

grid-row-end and grid-column-end

These properties specify a grid-item end position. Also work as the properties row-start, column-end

.grid-container {
        display: grid;
        grid-template-rows: 1fr 3fr 1fr;
}

.grid-container div:nth-child(1) {
        grid-row-start: 1;
        grid-row-end: 5;
}

grid-row and grid-column

These properties are shorthand of the properties row-start with row-end and column-start with columns-end

grid-area:

This property is a shorthand property that joins grid-row-start / grid-column-start / grid-row-start / grid-row-end;

.grid-container-3 {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  
    gap: 10px;
}

.grid-container-3 div:nth-child(4) {    
    background: magenta;  
    grid-area: 3 / 2 / 5 / 3;
    /*
        grid-row-start: 3;
        grid-column-start: 2;
        grid-row-end: 5;
        grid-column-end: 3;
   */
}

References: