CSSGrid布局详解：类型转换与布局技巧-CSDN博客

本文链接：https://blog.csdn.net/weixin_52544526/article/details/129078458

grid布局的类型转换

display：grid；

分列grid-template-colums:

分行grid-template-rows:

属性值：200px 200px 200px;相当于repeat(3,200px);

100px auto 100px;(auto部分系统自动补齐)

1fr 2fr 3fr(将行/列按照fr比例划分，总共划分六部分，按比例占用)

repeat(4,1fr);平分成四等分

20% 30% 50%；(按百分比划分)

repeat(auto-fill,30%);将按30%划分，盛放不下的则不划

100px minmax(min,max);条件允许用最大值，最小不能超过最小值

行间距 grid-row-gap: 20px;

列间距 grid-colums-gap: 20px;

复合属性 grid-gap:行间距列间距

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            margin: 60px;
            /* 声明一个容器 */
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 100px 200px;
            grid-gap: 20px 10px;
            
        }
        .item{
            text-align: center;
            font-size: 200%;
            color: #fff;
        }
        .one{
            background-color:#b8e8e0 ;
        }
        .two{
            background-color: #8CC7B5;
        }
        .three{
            background-color:#efe3bf ;
        }
        .four{
            background-color: #BEE7E9;
        }
        .five{
            background-color: #E6CEAC;
        }
        .six{
            background-color: #ECAD9E;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="one item">One</div>
        <div class="two item">Two</div>
        <div class="three item">Three</div>
        <div class="four item">Four</div>
        <div class="five item">Five</div>
        <div class="six item">Six</div>
</body>
</html>

效果图

容器属性显示方向 grid-auto-flow: row/clumn;横/纵向显示

项目对齐方式：

justify-items：start/center/end;水平对齐

align-items：start/center/end;垂直对齐

复合属性：place-items: align-items justify-items;

格子对齐方式

justify-content: start/center/end/space-around/space-between;水平对齐

align-content: start/center/end/space-around/space-between;垂直对齐

复合属性：place-content: align-content justify-content;

grid区域布局（注意区域是必须正方格子才能正常使用，若区域不让使用则用 . 代替）

grid-template-areas:

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid black;
            display: grid;
            grid-template-areas: 'a a b'
                                 'c f f'
                                 'e f f';
        }
        #box .one {
            grid-area:a;
            background-color: blanchedalmond;
        }
        #box .two{
            grid-area:b;
            background-color: cadetblue;
        }
        .three{
            grid-area:c;
            background-color: chartreuse;
        }
        .four{
            grid-area:d;
            background-color: coral;
        }
        .five{
            grid-area: e;
            background-color: cornflowerblue;
        }
        .six{
            grid-area: f;
            background-color: cyan;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <!-- <div class="four">4</div> -->
        <div class="five">5</div>
        <div class="six">6</div>
        <!-- <div class="one">7</div>
        <div class="one">8</div>
        <div class="one">9</div> -->
    </div> 
</body>

</html>

效果图

网格线布局

如下图所示，grid布局将方块分为几个网格，网格边界的为网格线

纵向网格线 grid-column-start/ grid-column-end:

复合属性：grid-column: 2/4;(从第2列开始到第4列)

横向网格线 grid-row-start/ grid-row-end:

复合属性：grid-row: 1/2;(从第1列开始到第2列)

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            margin: 60px;
            /* 声明一个容器 */
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 100px 200px;
            grid-gap: 20px 10px;
        }
        .item{
            text-align: center;
            font-size: 200%;
            color: #fff;
        }
        .one{
            background-color:#b8e8e0 ;
            grid-column: 2/4;
            grid-row: 1/2;
        }
        .two{
            background-color: #8CC7B5;
            grid-column: 1/2;
            grid-row: 1/3;
        }
        .three{
            background-color:#efe3bf ;
            grid-column: 2/4;
            grid-row: 2/3;
        }
        .four{
            background-color: #BEE7E9;
        }
        .five{
            background-color: #E6CEAC;
        }
        .six{
            background-color: #ECAD9E;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="one item">One</div>
        <div class="two item">Two</div>
        <div class="three item">Three</div>
        <!-- <div class="four item">Four</div>
        <div class="five item">Five</div>
        <div class="six item">Six</div> -->
</body>
</html>

效果图

grid布局的最全用法