What are css grid layout and flex layout?

In CSS, grid layout refers to "grid layout". It is a two-dimensional system that can handle both rows and columns. It can be created by applying CSS rules to the parent element and the child elements of that element. Use grid layout; flex layout refers to "elastic layout", which is a one-dimensional system used to provide maximum flexibility for box-shaped models.

The operating environment of this article: windows10 system, css3, thinkpad t480 computer.

(Recommended tutorial: CSS video tutorial)

1. Introduction to flex layout

Flex is flexible box (elastic layout ) is a one-dimensional system designed to provide maximum flexibility for box-like models.

Usage: any container (inline elements can be set to display:inline-block);

Features: Space distribution is performed in the row, not as a whole

2. Introduction to grid layout

Gird Layout (css grid layout) is the most powerful layout system in css. It is a two-dimensional system that can handle rows and columns at the same time. Used for a parent element (grid container) and that element's child elements (grid elements) to use grid layout.

Usage: Set dispay: grid; grid-template-colums and grid-template-rows on the parent element to set the number of rows and columns, and then set the number of rows and columns occupied by the child element

Features: two-dimensional grid structure, very easy to operate

Practical combat one: use grid layout to make a simple nine-square grid

html code:

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

css code:

.box{
    width: 1200px;
    height: 80vh;
    display: grid;  // 开启grid布局
    grid-template-columns: repeat(3,30%);   // 设置列
    grid-template-rows: repeat(3,30%);  // 设置行
    grid-column-gap: 20px; // 设置网格之间的间距
    grid-row-gap: 20px; // 设置网格之间的间距
}
.box div{
    background-color: #34ce57;
}

##Practice 2: Make a commonly used website layout

html code:

<div class="box">
    <div class="header">header</div>
    <div class="content">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

css code:

.box {
    width: 1200px;
    height: 80vh;
    display: grid; // 开启grid布局
    grid-template-rows: 10% 80% 10%;  // 设置行数
}
.header {
    background-color: #6ac13c;
    display: grid;
    /*居中*/
    align-content: center;
    justify-content: center;
}
.content {
    /*background-color: #f1b0b7;*/
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-gap: 20px;  // 网格之间的间隔
}
.footer {
    background-color: #ffc107;
    display: grid;
    align-items: center;
    justify-content: center;
}
.left {
    background-color: #5599FF;
}
.center {
    background-color: lightgreen;
}
.right {
    background-color: orchid;
}

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of What are css grid layout and flex layout?. For more information, please follow other related articles on the PHP Chinese website!