CSS Grid Layout

CSS has some properties that are often used to solve layout problems: such as (floating float, positioning postion) these relatively hacky methods often leave some problems on the page.

Flexbox is a very good layout tool, and CSS Grid Layout is the latest and more powerful layout method. This article will briefly introduce what grid layout is.

Grid Layout (CSS Grid Layout)

Grid layout is a two-dimensional layout system that completely changes the way we design UI compared to the layouts that were commonly used in the past.

Terms to Know

Grid Container (grid container), Grid Item (grid container child elements).

Grid Line, Grid Cell.

Grid Track (grid track), Grid Area (area separated by grid lines).

Legend Reference

page structure

 <div class="container">
    <div class="item item_a">item_a</div>
    <div class="item item_b">item_b</div>
    <div class="item item_c">item_c</div>
</div>

Define a container for a grid layout

 .container {
    display: grid;
}

Set grid rows and columns

 .container {
    display: grid;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 100px [row1-end] 100px [third-line] 100px [last-line];
}

In the above way, a grid container with 3 rows and 5 columns is declared.

Sets the element position within the grid container

 .item_a {
    grid-column-start: 4;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 2;

    background-color: orange;
}
.item_b {
    grid-column-start: 1;
    grid-column-end: span col4-start;
    grid-row-start: 3;
    grid-row-end: span 2;

    background-color: aqua;
}
.item_c {
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-row-start: 2;
    grid-row-end: span 1;

    background-color: rgb(149, 255, 0);
}

Result graph:

It can be seen that the corresponding item has been placed in the position specified by the grid. Imagine how you would implement this layout without grid layout?

At this point, maybe you are still confused about grid layout, but the good news is that I got a cheating map, you can practice it yourself according to the legend (to practice this skill, you must work hard):

This is the end of the article. If it helps you, please like it.

The article was first published on IICCOM-Personal Blog|Technical Blog- 《CSS Grid Layout(Grid Layout)》