【CSS】布局技术二：grid 布局（二维）总结

布局技术二：grid 布局（二维）

Grid 术语

(一) 容器属性

display: 容器类型（块或行内）
grid-template-row/columns：创建显示网格
grid-auto-rows/columns: 创建隐式网格
grid-auto-flow: 项目排列方向
gap: 行列间隙
place-content: 项目在容器中的排列方式
place-items: 项目在单元格中的排列试工

（二）项目属性

grid-row/column: 某项目占据的网格区域
grid-area: grid-row/column语法糖
place-self: 某项目在单元格中的排列方式

显式风格与项目属性

布局技术: Grid: display: grid;
显式网格
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr); */
grid-template-rows: repeat(3,50px);
排列规则
grid-auto-flow: column;
grid-auto-flow: row;
布局属性：grid-area
重点
span 简化：行开始/列开始/跨越行/跨越列;
grid-area: 1 / 1 / span 2 / span 2;

排列规则与隐式网格

排列规则：grid-auto-flow:row / column 行优先/列优先
隐式网格：grid-auto-row / column 多除隐式网格自定义高和度

Grid项目之对齐方式

对齐方式：必须存在“剩余空间”
对齐方案：“剩余空间”在“项目”之间的分配方式
剩余空间：Flex(主轴，交叉轴)，Grid(容器，单元格)
Grid:剩余空间存在于“容器”或“单元格”
容器中：place-content,place-items
项目中：place-self

Grid项目之行列间隙

行列间隙
gap: 垂直方向水平方向
gap: 5px 5px;
项目间隙 5PX
gap: 5px;

更多：参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid

示例代码

1:grid属性-1：显式风格与项目属性

<!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>grid属性-1：显式风格与项目属性</title>
</head>
<body>
    <!-- 容器：父元素 -->
    <div class="container">
        <!-- 项目：子元素 -->
        <div class="item">item1</div>
    </div>
    <style>
        .container {
            /* grid布局 */
            display: grid;
            width: 300px;
            height: 150px;
            /* 3行3列 */
            /* grid-template-columns: 100px 100px 100px;
            grid-template-rows: 50px 50px 50px; */
            /* grid-template-columns: repeat(3,100px);
            grid-template-rows: repeat(3,50px); */
            /* 容器300px,而每个项目100px，有3个项目正好充满容器，1:1:1 */
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
        }
        .container > .item {
            background-color: wheat;
        }
        /* 可以将项目放在任何一个单元格中 */
        .container > .item:first-of-type {
            /* 默认：1行1列到2行2列 */
            /* grid-row: 起始行 / 结束行； */
            /* grid-column：起始列 / 结束列； */
            grid-row: 1 / 2;
            grid-column: 1 /2;
            /* 移动到正中间 */
            grid-row: 2 / 3;
            grid-column: 2 / 3;
            /* 因为一个项目至少要占据一个单元格，默认跨越一个单元格编号 */
            grid-row: 2;
            grid-column: 2;
            /* 很多场景下，用户不关心也不知道结束编号，只知道要跨越几行几列 */
            grid-row: 2 / span 1; 
            grid-column: 2 / span 1;
            /* 从当前位置开始，跨越2行2列 */
            grid-row: 2 / span 2;
            grid-column: 2 / span 2;
            /* grid-row,grid-column 创建出了一个网格区域 */
            /* grid-area: 行开始/列开始/行结束/列结束; */
            grid-area: 1 / 1 / 3 / 3;
            /* span 简化 */
            grid-area: 1 / 1 / span 2 / span 2;
            /* 页脚 布局 */
            grid-area: 3 / 1 / span 1 / span 3; 
        }
    </style>
</body>
</html>

示例代码2:Grid属性-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>Grid属性-2：排列规则与隐式网格</title>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
        <div class="item">item11</div>
        <div class="item">item12</div>
    </div>
    <style>
        .container {
            width: 300px;
            /* height: 150px; */
            /* 布局技术: Grid */
            display: grid;
            /* 显式网格 */
            grid-template-columns: repeat(3,1fr);
            /* grid-template-rows: repeat(3,1fr); */
            grid-template-rows: repeat(3,50px);
            /* 排列规则 */
            grid-auto-flow: column;
            grid-auto-flow: row;
            /* 隐式网格 */
            /* 多余的项目，出现在隐式网格中（自动生成） */
            /* 自定义隐式网格高度 */
            grid-auto-rows: 50px;
            /* 共享高度，与显式网络高度一致 */
            /* grid-auto-rows: 1fr; */
        }
        .container > .item {
            background-color: wheat;
        }
        .container > .item:nth-last-child(-n+2){
            background-color: yellow;
        }
    </style>
</body>
</html>

示例代码3:Grid之项目对齐

<!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>Grid属性3：项目对齐</title>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>
    <style>
        /**------------------------------------------------------------------------
         * * 1. 对齐方式：必须存在“剩余空间”
         * * 2. 对齐方案：“剩余空间”在“项目”之间的分配方式
         * * 3. 剩余空间：Flex(主轴，交叉轴)，Grid(容器，单元格)
         * * Grid:剩余空间存在于“容器”或“单元格”
         * * 容器中：place-content,place-items
         * * 项目中：place-self
         *------------------------------------------------------------------------**/
        .container {
            display: grid;
            grid-template-columns: repeat(3,100px);
            grid-template-rows: repeat(3,100px);
        }
        .container .item {
            background-color: wheat;
        }
        /* 创建容器剩余空间 */
        .container {
            width: 450px;
            height: 450px;
            border: 1px solid #000;
            background-color: lightgreen;
            /* 1. 项目在“容器”中的对齐 */
            /* 默认值：垂直居上，水平居左 */
            place-content: start start;
            /* 垂直居中，水平居右 end <==> right */ 
            place-content: center end;
            /* 全部居中 */
            place-content: center;
            /* 水平方向居中对齐，垂直方向分散对齐 */
            place-content: space-between space-around;
            /* 2. 项目在单元格中对齐 */
            /* 单元格中必须要有剩余控件，即：项目 < 单元格 */
            /* place-tiems:垂直方向 水平方向 */
            /* 默认值：place-items: start strat; */
            place-items: start start;
            /* 垂直居中 水平居右对齐 */
            place-items:center end;
            /* 垂直水平居中 */
            place-items: center;
            }
            /* 3. 设置某个项目在单元格中对齐方式不同 */
            .container .item:nth-child(5) {
              background-color: yellow;
              place-self: end;
        }
    </style>
</body>
</html>

Grid属性4：行列间隙

<!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>Grid属性4：行列间隙</title>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3,100px);
            grid-template-rows: repeat(3,100px);
            /* 行列间隙 */
            /* gap: 垂直方向  水平方向  */
            gap: 5px 5px;
            /* 项目间隙 5PX */
            gap: 5px;
        }
        .container .item {
            background-color: wheat;
        }
    </style>
</body>
</html>

布局技术二：grid 布局（二维）

Grid 术语

显式风格与项目属性

排列规则与隐式网格

Grid项目之对齐方式

Grid项目之行列间隙

示例代码

1:grid属性-1：显式风格与项目属性

示例代码2:Grid属性-2：排列规则与隐式网格

示例代码3:Grid之项目对齐

Grid属性4：行列间隙

相关文章