css——网格布局

鸣弦artha2024-09-07 8:29

名词解释

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>

默认

控制隐式单元格后

相关推荐
打不着的大喇叭28 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code34 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟36 分钟前
《前端路由重构：解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现：从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素：不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠1 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github
热门推荐
01集群聊天服务器---MySQL数据库的建立02GPU 进阶笔记（二）：华为昇腾 910B GPU03Coze扣子平台完整体验和实践（附国内和国际版对比）04使用Ruby接入实时行情API教程05Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07基于odoo17的设计模式详解---装饰模式08扣子空间的使用教程与大模型技术思考09DeepSeek各版本说明与优缺点分析10Everything文件检索工具 几秒检索几百G的文件