十七、网格布局

最新推荐文章于 2024-07-07 19:48:42 发布

小豆很优秀

最新推荐文章于 2024-07-07 19:48:42 发布

阅读量322

点赞数

本文链接：https://blog.csdn.net/qq_52426181/article/details/110959513

版权

网格布局

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

1、基本概念

（1）容器

采用grid布局（display:grid）的元素就成为容器

（2）项目

容器下面的直接子元素就是项目

（3）行

容器中的水平区域就是行

（4）列

容器中的垂直区域就是列

（5）单元格

行与列的交叉的区域就是单元格

有一个m行n列的网格，会产生m*n个单元格

（6）网格线

m行n列的网格，会有m+1根水平网格线，会有n+1根垂直网格线

2、设置网格布局

display：grid;
display:inline-grid;

3、容器属性

（1）grid-template-columns属性

定义每一列的列宽

（2）grid-template-rows属性

定义每一行的行高

常用值：

px | %
函数
- repeat(参数1，参数2) 重复某种值或者模式
参数1代表重复的次数，参数2代表重复的值
- minmax(参数1，参数2) 产生一个长度值
参数1代表设置的最小值，参数2代表设置的最大值
关键词
- auto 自动
- fr 分配比例关系
网格线名称

<!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>
        .wrap {
    
            /* 设置为网格布局 */
            display: grid;
            /* 设置列宽 */
            /* 设置的是长度单位值 */
            /* 代表的含义： 将网格划分了三列，第一列的列宽是100像素，第二列的列宽是150像素，第三列的列宽是200像素 */
            /* grid-template-columns: 100px 150px 200px; */
            /* 设置行高 */
            /* grid-template-rows: 200px 200px 200px; */
            /* grid-template-rows: 33.3% 33.3% 33.3%; */
            /* grid-template-rows: repeat(3,33.3%); */
            /* grid-template-columns: repeat(3,200px); */


            /* 行高与列宽重复某种模式 */
            /* 将网格划分了四列，第一列与第三列的列宽是100像素，第二列与第四列的列宽是120像素 */
            /* grid-template-columns: repeat(2,100px 120px);
            grid-template-rows: repeat(2,100px 120px 200px); */


            /* minmax() */
            
            /* grid-template-columns: 300px minmax(100px,200px) 250px; */

            /* auto */
            /* grid-template-columns: 100px 300px auto; */
            /* fr */
            grid-template-columns: 100px 1fr 2fr;
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
        .box:nth-child(odd) {
    
            background-color: aqua;
        }
        .box:nth-child(even) {
    
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div