css——网格布局


名词解释

div{$}*9+tab键,快捷生成

记首字母gtc

网格布局:display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; (父元素)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 设置之网格布局 */
            display: grid;
            /* 设置纵向单元格属性(列) */
            grid-template-columns: 50px 20% auto;
            /* 20% 占父盒子的20% */
            /* 设置横向单元格属性(行) */
            grid-template-rows: 2fr 1fr 0.5fr;
            /* fraction n份 */
        }
        .box div{
            background-color: pink;
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    </div>
</body>
</html>

合并单元格:父盒子grid-template-areas:"a1 a1 a2" "a1 a1 a2""a3 a3 a3"; 子盒子grid-area: a1;

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 设置之网格布局 */
            display: grid;
            /* 设置纵向单元格属性(列) */
            /* grid-template-columns: 50px 20% auto; */
            /* 20% 占父盒子的20% */
            /* 设置横向单元格属性(行) */
            /* grid-template-rows: 2fr 1fr 0.5fr; */
            /* fraction n份 */

            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 
            "a1 a1 a2"
            "a1 a1 a2"
            "a3 a3 a3";
        }
        .box div{
            background-color: pink;
            /* width: 20px;
            height: 20px; */
            border: 1px solid black;
        }
        .box div:nth-of-type(1){
            grid-area: a1;
            /* 指定元素代表单元格模板中的哪个标识 */
        }
        .box div:nth-of-type(2){
            grid-area: a2;
        }
        .box div:nth-of-type(3){
            grid-area: a3;
        }
    </style>
</head>
<body>
    <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div> -->
    </div>
</body>
</html>

组合属性:grid-template:"a1 a1 a2" 1fr "a1 a1 a2" 1fr"a3 a3 a3" 1fr/ 1fr 1fr 1fr;}

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 设置之网格布局 */
            display: grid;
            /* 设置纵向单元格属性(列) */
            /* grid-template-columns: 50px 20% auto; */
            /* 20% 占父盒子的20% */
            /* 设置横向单元格属性(行) */
            /* grid-template-rows: 2fr 1fr 0.5fr; */
            /* fraction n份 */

            /* grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 
            "a1 a1 a2"
            "a1 a1 a2"
            "a3 a3 a3"; */

            /* 组合属性 */
            grid-template: 
            "a1 a1 a2" 1fr
            "a1 a1 a2" 1fr
            "a3 a3 a3" 1fr
            / 1fr 1fr 1fr;
        }
        .box div{
            background-color: pink;
            /* width: 20px;
            height: 20px; */
            border: 1px solid black;
        }
        .box div:nth-of-type(1){
            grid-area: a1;
            /* 指定元素代表单元格模板中的哪个标识 */
        }
        .box div:nth-of-type(2){
            grid-area: a2;
        }
        .box div:nth-of-type(3){
            grid-area: a3;
        }
    </style>
</head>
<body>
    <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div> -->
    </div>
</body>
</html>

行间隙row-gap: 20px;列间隙column-gap: 30px; 组合gap:20px 30px;

也可用于弹性盒子

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* 设置之网格布局 */
            display: grid;
            /* 设置纵向单元格属性(列) */
            /* grid-template-columns: 50px 20% auto; */
            /* 20% 占父盒子的20% */
            /* 设置横向单元格属性(行) */
            /* grid-template-rows: 2fr 1fr 0.5fr; */
            /* fraction n份 */

            /* grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 
            "a1 a1 a2"
            "a1 a1 a2"
            "a3 a3 a3"; */

            /* 组合属性 */
            grid-template: 
            "a1 a1 a2" 1fr
            "a1 a1 a2" 1fr
            "a3 a3 a3" 1fr
            / 1fr 1fr 1fr;

            /* row-gap: 20px;
            column-gap: 30px; */
            gap: 20px 30px
        }
        .box div{
            background-color: pink;
            /* width: 20px;
            height: 20px; */
            border: 1px solid black;
        }
        .box div:nth-of-type(1){
            grid-area: a1;
            /* 指定元素代表单元格模板中的哪个标识 */
        }
        .box div:nth-of-type(2){
            grid-area: a2;
        }
        .box div:nth-of-type(3){
            grid-area: a3;
        }
    </style>
</head>
<body>
    <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div> -->
    </div>
</body>
</html>

子元素对齐 主轴 justify-items: end/start/auto/center; 交叉轴align-items ; 组合place-items: center end;(交叉轴 主轴)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* display: flex;
            flex-wrap: wrap;
            row-gap: 20px;
            column-gap: 20px; */

            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
            /* justify-items: end;
            align-items: center; */
            place-items: center end;
        }
        .box div{
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

单元格对齐 justify-content: space-around;align-content: center;组合place-content: center space-around;

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* display: flex;
            flex-wrap: wrap;
            row-gap: 20px;
            column-gap: 20px; */

            display: grid;
            grid-template-columns: 50px 50px 50px;
            grid-template-columns: 50px 50px 50px;
            /* justify-items: end;
            align-items: center; */
            /* place-items: center end; */
            /* justify-content: space-around;
            align-content: center; */
            place-content: center space-around; 
        }
        .box div{
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

隐式单元格 grid-auto-flow: row; grid-auto-rows: 50px;

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr;
            /* 控制隐式单元格 */
            grid-auto-flow: row;
            grid-auto-rows: 50px;
            /* grid-auto-flow: column; */
            /* grid-auto-columns: 150px; */
        }
        .box div{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

默认

控制隐式单元格后

相关推荐
Nan_Shu_61444 分钟前
Web前端面试题(2)
前端
知识分享小能手1 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
2501_918126911 小时前
用html5写一个flappybird游戏
css·游戏·html5
蚂蚁RichLab前端团队2 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20503 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端3 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿3 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉3 小时前
Vue组件化开发介绍
前端·javascript·vue.js