Bootstrap

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>

默认

 

控制隐式单元格后

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
网络原理之 IP 协议
python海龟绘图代码大全-编程入门06：Python海龟绘图
易经全文
测试面试宝典（五）—— 请你分别介绍一下单元测试、集成测试、系统测试、验收测试、回归测试
python学习笔记
.NET 8首个RC发布：GPT分析对C#的惊人影响！
【C++初阶】简析拷贝构造、赋值运算符重载
图论导引 - 第三章 第四节 - 11/13
java 原码、补码、反码、位运算详解
ENVI数据文件打开
;