栅格布局

最新推荐文章于 2023-05-29 15:11:40 发布

oleolema

最新推荐文章于 2023-05-29 15:11:40 发布

阅读量593

点赞数 2

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_19266669/article/details/103263648

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用display:grid; 设置栅格布局

`grid-template-rows` `设置每一行的大小`

`grid-template-columns 设置每一列的大小`


//使用值

//设置了前三行每行高度为100px ，未设置的元素使用默认大小
grid-template-rows:100px 100px 100px;

//设置了第一列宽度为100px  第二列宽度50%
grid-template-columns:100px 50%;


//使用repeat(num, size)函数批量设置大小 ,num：重复次数，size:大小
grid-template-rows: repeat(3, 100px);
//这句话等同于  grid-template-rows:100px 100px 100px;

grid-template-columns: repeat(2, 100px 50%);
//这句话等同于  grid-template-columns:100px 50% 100px 50%;


//按照大小划分，有些情况下，你不想关心每列元素个数，只关心每个元素大小，这需要使用auto-fill
grid-template-columns: repeat(auto-fill, 100px);
//auto-fill 根据 父元素宽度 / 子元素宽度 计算出auto-fill的值。

//按照个数划分，有些情况下，你只想知道每行有多少个元素，不想关心它到底有多大
grid-template-columns: repeat(3, 1fr);
//这句话等同于  grid-template-columns:1fr 1fr 1fr;
//意思是：等比例划分3列

grid-template-columns:1fr 2fr 1fr;
//意思是：划分3列，比例为 1 : 2 : 1



//在按照个数划分的时候，元素大小由浏览器计算出来可能很小，也可能很大，这需要使用minmax(size1, size2) 限制大小范围
grid-template-columns: repeat(3, minmax(50px, 100px));
//minmax(50px, 100px) 限制了子元素的大小在50px -- 100px 之间， 不管父元素大小如何变化，子元素的大小都在这范围之间

设置间距

//方式1，传统方式，是用border，padding，margin来调整间距

border: 5px solid #fff;
box-sizing: border-box;



//方式2，gad
//行间距10px  列间距10px
gap: 10px 20px;
//相当于
row-gap: 10px;
column-gap: 10px;

放置元素

有这么一个栅格, 要将1号元素放到这4个格子中

//栅格有纵横4条线, 分别为1,2,3,4
下面4个值代表元素1的每一个边, 将每一边放到对应的栅格线上完成布局

grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 4;
grid-column-end: 4;

区域命名

由于栅格线不易观察, 所以可以使用区域命名的方式为每条栅格线命名

//命名
//[r1-s] 表示 1fr划分出来左边的线
//[r1-e r2-s] 同时为这条线区两个名字
grid-template-rows: [r1-s]1fr [r1-e r2-s] 1fr [r2-e r3-s] 1fr [r3-e];
grid-template-columns: [c1-s]1fr [c1-e c2-s] 1fr [c2-e c3-s] 1fr [c3-e];



//使用达到上面图片同样的效果
grid-row-start: r2-s;
grid-column-start: c2-s;
grid-row-end: r3-e;
grid-column-end: c3-e;


//重复命名
grid-template-columns: repeat(3, [c-s] 1fr [c-e]);
grid-template-rows: repeat(3, [r-s] 1fr [r-e]);

//同样效果
grid-row-start: r-s 2;
grid-column-start: c-s 2;
grid-row-end: r-e 3;
grid-column-end: c-e 3;

使用偏移位置 span

//span表示相对于start的偏移位置, 这段代码也是上面的图形

grid-row-start: 2;
grid-column-start: 2;
grid-row-end: span 2;
grid-column-end: span 2;

使用合并属性

grid-row: 2/span 2;
grid-column: 2/span 2;

//相当于
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: span 2;
grid-column-end: span 2;

制作一个简易的栅格系统

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>栅格系统Demo</title>

    <style>
        .row {
            width: 1200px;
            border: 2px solid #dedede;
            display: grid;
            grid-template-columns: repeat(15, 1fr);
            margin: 0 auto;
        }

        .col-1 {
            grid-column: span 1;
        }

        .col-2 {
            grid-column: span 2;
        }

        .col-3 {
            grid-column: span 3;
        }

        .col-4 {
            grid-column: span 4;
        }

        .col-5 {
            grid-column: span 5;
        }

        .col-6 {
            grid-column: span 6;
        }

        [class^="col-"] {
            height: 50px;
            background: gold;
            box-sizing: border-box;
            border: 2px solid #fff;

        }
    </style>

</head>

<body>
    <div class="row">
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-1"></div>
    </div>
    <div class="row">
        <div class="col-1"></div>
        <div class="col-2"></div>
        <div class="col-3"></div>
    </div>
    <div class="row">
        <div class="col-6"></div>
        <div class="col-6"></div>
        <div class="col-6"></div>
    </div>
</body>

</html>

区域划分 grid-area

grid-area 是一种对于 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 grid row 中指定一个网格项的大小和位置，继而确定 grid area 的边界。

//父样式
grid-template-columns: repeat(3, [c] 1fr);
grid-template-rows: repeat(3, [r] 1fr);


//子样式 达到上面同样效果
grid-area: r 2/c 2/span 2/span 2;

  /* 区域划分 */
grid-template-areas:
                "a a c"
                ". b c"
                ". b c";


/*子元素*/        
.div1 {
    grid-area: a;
}

.div2 {
    grid-area: b;
}

.div2 {
    grid-area: c;
}

区域划分默认命名

/* 区域划分 */
grid-template-areas:
                "a a c"
                ". b c"
                ". b c";
/*
a区域的4条栅格线（上，左，下，右）默认命名： a-start a-start a-end a-end
*/


//子元素使用使用默认命名
grid-area: b-start/b-start/b-end/c-end;

栅格流动

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

row

该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定 row 也没有 column，则默认为 row。

column

该关键字指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。

dense

该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。

这里划分了3*3的网格，在未使用dense时，但子元素被挤到新的一行，自动添加第4行，布局算法只会「向前」移动，永远不会倒回去填补空白。

加上这个属性后，会试图去填充网格中前面留下的空白，可能导致原来出现的次序被打乱。

grid-auto-flow: dense;

栅格整体对齐方式

       .wrap {
            display: grid;
            height: 80px;
            width: 300px;
            grid-template-columns: repeat(4, 1fr);
            border: 3px solid #dedede;
        }

        .wrap div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border: 5px solid #fff;
            box-sizing: border-box;
        }

现在要将这个几个子元素相对放到各自格子中间，需要用到跟弹性盒模型类似的属性 justify-** ,align-**

        .wrap {
            display: grid;
            height: 80px;
            width: 300px;
            grid-template-columns: repeat(4, 1fr);
            border: 3px solid #dedede;

            align-items: center;
            justify-items: center;
        }

如果栅格没有撑满容器

现在要让栅格居中对齐，并且各种元素相对格子居中

        .wrap {
            display: grid;
            height: 80px;
            width: 300px;
            grid-template-columns: repeat(4, 60px);
            border: 3px solid #dedede;

            align-content: center;
            justify-content: center;
        }

上面代码只是让整体栅格居中对齐，但每个格子还没能对齐

        .wrap {
            display: grid;
            height: 80px;
            width: 300px;
            grid-template-columns: repeat(4, 60px);
            border: 3px solid #dedede;

            align-content: center;
            justify-content: center;
            
            align-items: center;
            justify-items: center;
        }

上面代码也可以简写为

        .wrap {
            display: grid;
            height: 80px;
            width: 300px;
            grid-template-columns: repeat(4, 60px);
            border: 3px solid #dedede;


            place-content: center center;
            place-items: center center;
        }

使用align-items 或者在子元素使用align-self 都可以

对齐总结：

justify-content / align-content 是调整整个栅格相对于父容器的布局
justify-self / align-self 是调整每个元素相对于格子的布局
justify-items / justify-items 跟 justify-self / align-self 效果一样，只是它能统一改变全部格子布局而已

oleolema

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
栅格布局

使用display:grid; 设置栅格布局grid-template-rows设置每一行的大小grid-template-columns设置每一列的大小//使用值//设置了前三行每行高度为100px ，未设置的元素使用默认大小grid-template-rows:100px 100px 100px;//设置了第一列宽度为100px 第二列宽度50%grid-te...
复制链接

扫一扫