Summary of usage of Grid layout in CSS (with code)

This article introduces to you a summary of the usage of Grid layout in CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you

1. Basic usage

There are 5 core attributes of Grid layout:

.parent {
    display: grid;
    grid-template-colomns: 30px 1fr;
    grid-template-rows: repeat(3, 30px) 1fr;
    & > .child {
        grid-column: 1 / 3;
        grid-row: 1;
    }
}

In general, Grid layout is: The parent element must be defined first It has several rows and columns. Then, the sub-element defines which row and column it is in (it can span multiple rows or columns).

Among them, everyone should be familiar with the display attribute, right? No more details here.

repeat function means to repeat a css value n times.

gird-column can be split into grid-column- start and grid-column-end two attributes.

gird-row can be split into grid-row-start and grid-row-end two properties.

2. <span style="font-size: 16px;">grid-template-areas</span> And<span style="font-size: 16px;">grid-area</span>

grid-template-areasThis attribute actually has a bit of a hieroglyphic meaning.

.parent {
    display: grid;
    grid-template-colomns: 100px 1fr;
    grid-template-rows: 1fr 50px;
    grid-template-areas:
        "nav    content"
        "footer footer ";

    & > .item1 {
      grid-area: nav;
    }
    & > .item2 {
      grid-area: content;
    }
    & > .item3 {
      grid-area: footer;
    }
}

Above we divided the parent element into 4 grids. Then we named the upper left grid nav, the upper right grid content, and the bottom grid footer.

Finally, we only need to Just specify which area you belong to.

There is an advantage to writing this way: we no longer have to write the boring and difficult grid-column and grid-row , you can give your area a semantic name

3. <span style="font-size: 16px;">row-gap</span>, <span style="font-size: 16px;">colomns-gap</span>, <span style="font-size: 16px;">grid-gap</span>

Similar to Flex, Grid layout also supports line spacing and column spacing.

grid-gap is the merger of row-gap and colomns-gap.

grid-gap can also be abbreviated as gap.

Note: The default value of colomns-gap is normal , means the column spacing is 1em

##4. grid-auto-columns<span style="font-size: 16px;"></span>and grid-auto-rows<span style="font-size: 16px;"></span>

If you don’t know how many rows (columns) your grid has in advance, these two properties can help To you. Just like the literal meaning,

This property represents the height (width) of the self-growing grid rows (columns)

Especially when you render a list of variable length , this attribute will be very useful.

For example:

.parent {
    display: grid;
    grid-template-colomns: 1fr;
    grid-auto-rows: 100px;

    & > .child {
        grid-column: 1;
    }
}

Recommended related articles:

Introduction to flexible box layout (with code)

How to implement responsive layout using CSS

The above is the detailed content of Summary of usage of Grid layout in CSS (with code). For more information, please follow other related articles on the PHP Chinese website!