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>

默认

控制隐式单元格后

相关推荐
0wioiw04 分钟前
Flutter基础（前端教程④-组件拼接）
前端·flutter
花生侠28 分钟前
记录：前端项目使用pnpm+husky（v9）+commitlint，提交代码格式化校验
前端
一涯36 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调43 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined244 分钟前
element中的Table改造成虚拟列表，并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析：依赖收集
前端·vue.js
热门推荐
01集群聊天服务器---MySQL数据库的建立02Java学习第十五部分——MyBatis03Coze扣子平台完整体验和实践（附国内和国际版对比）04基于odoo17的设计模式详解---单例模式05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07《深入设计模式》模式结构汇总08基于odoo17的设计模式详解---装饰模式09DeepSeek各版本说明与优缺点分析10Java类变量（静态变量）