【CSS】【grid布局】css中的grid布局详解

最新推荐文章于 2024-04-07 10:46:03 发布

命运之手

最新推荐文章于 2024-04-07 10:46:03 发布

阅读量1.1k

点赞数

分类专栏： javascript javascript疑难杂症研究文章标签： display:grid GridLayout

Hello World

本文链接：https://blog.csdn.net/u013718730/article/details/89462758

版权

javascript 同时被 2 个专栏收录

106 篇文章 6 订阅

订阅专栏

javascript疑难杂症研究

2 篇文章 0 订阅

订阅专栏

博客参考了以下两篇文章：
英文 https://css-tricks.com/snippets/css/complete-guide-grid
中文 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

GridLayout将整个容器分割为若干行和列，可以指定子项元素跨若干行列来摆放，逻辑并不复杂，只要把各个属性作用弄清楚，很容易使用
完整是属性介绍可以查阅上面两篇文章，这里只介绍最核心常用的属性

不建议把属性强行记下来，那样很累，而且实际效果不一定好，需要的时候对照文档博客，尝试下属性效果，多用几次自然就熟了

页面布局代码如下：


    <body>
        <div class="container">
            <div class="item" id="item-1">1</div>
            <div class="item" id="item-2">2</div>
            <div class="item" id="item-3">3</div>
            <div class="item" id="item-4">4</div>
            <div class="item" id="item-5">5</div>
            <div class="item" id="item-6">6</div>
            <div class="item" id="item-7">7</div>
            <div class="item" id="item-8">8</div>
            <div class="item" id="item-9">9</div>
        </div>
    </body>

简单效果预览：
在这里插入图片描述

grid-template-columns：定义容器被分割成多少列
grid-template-rows：定义容器被分割成多少行
有以下取值：
100px 具体长度
auto 自动适应，一般会占满剩余空间，如果其它item设置了百分比，则只保持内容大小
1fr 剩余空间分配比例
30% 百分比


        .container {
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 200px 200px 200px;
        }

grid-column-gap：列间距
grid-row-gap：行间距
grid-gap：grid-column-gap和grid-row-gap的简写


        .container {
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 200px 200px 200px;
            grid-column-gap: 10px;
            grid-row-gap: 10px;
        }

grid-auto-flow：未指定子项元素位置时，先按行排列，还是先按列排列
grid-auto-flow有以下取值：row，column，row dense，column dense
dense表示尽量紧密排列，占据空白位置，而未设置dense则会尽量保持子项元素在文档中的先后关系

grid-auto-flow=row效果


        .container {
            display: grid;
            grid-template-columns: 100px 100px 100px 100px;
            grid-template-rows: 100px 100px 100px 100px;
            grid-auto-flow: row;
            background: yellow;
        }
        
        #item-1 {
            grid-column-end: span 3;
            background: greenyellow;
        }

        #item-2 {
            grid-column-end: span 3;
            background: lightskyblue;
        }

        #item-3 {
            background: orangered;
        }

在这里插入图片描述
grid-auto-flow=row dense效果

justify-items：当元素无法占满格子空间时，在格子中的水平排列方式
align-items：当元素无法占满格子空间时，在格子中的竖直排列方式
justify-items和align-items的取值有：start，end，center，stretch
在这里插入图片描述

justify-content：当所有单元格加起来，仍然没有铺满容器时，设置整个Grid在容器中的水平排列方式
align-content：当所有单元格加起来，仍然没有铺满容器时，设置整个Grid在容器中的竖直排列方式
place-content：justify-content和align-content的简写
justify-content和align-content的取值有：start，end，center，stretch，space-around，space-between，space-evenly
在这里插入图片描述

grid-auto-columns：当子项中指定的列index，超出容器预设的列数量时，允许自动增加列，grid-auto-columns设置自动增加的列宽
grid-template-rows：当子项中指定的行index，超出容器预设的行数量时，允许自动增加行，grid-auto-columns设置自动增加的行高

grid-column-start：子项元素列开始位置
grid-column-end：子项元素列结束位置
grid-row-start：子项元素行开始位置
grid-row-end：子项元素行结束位置
grid-column：grid-column-start和grid-column-end的简写
grid-row：grid-row-start和grid-row-end的简写
其中，end可以指定具体位置，也可以只指定跨几行几列，让解释器自己去计算位置


        #item-1 {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-column-end: span 2;
            grid-column: 1/3;
            grid-column: 1/span 2;
        }

在这里插入图片描述
justify-self：覆盖容器统一的justify-items属性，使用自己的规则
align-self：覆盖容器统一的align-items属性，使用自己的规则
place-self：align-self和justify-self的简写

GridLayout中，让子项元素文本居中的方式：
给子项元素也设置grid布局，这样就可以控制文本元素显示在中间


        .container {
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            background: yellow;
        }

        .item {
            width: 100%;
            height: 100%;
            font-size: 30px;
            font-family: Monospaced;
            user-select: none;
            display: grid;
            align-items: center;
            justify-items: center;
        }

在这里插入图片描述

grid-template-areas：以矩阵的方式来定义单元格分布方式，并且每个单元格可以有自己的名称
grid-area：子项元素设置自己在容器中处于哪个单元格位置


        .container {
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-areas: "a b c" "d d d" "e e f" "g h i";
            background: yellow;
        }

        #item-1 {
            grid-area: d;
            background: greenyellow;
        }

        #item-2 {
            grid-area: e;
            background: lightskyblue;
        }

在这里插入图片描述

命运之手

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【CSS】【grid布局】css中的grid布局详解

博客参考了以下两篇文章：英文 https://css-tricks.com/snippets/css/complete-guide-grid中文 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.htmlGridLayout将整个容器分割为若干行和列，可以指定子项元素跨若干行列来摆放，逻辑并不复杂，只要把各个属性作用弄清楚，很容易使用完整是属性介绍可以查阅上面两篇文章，这里只介绍最核心常用的属性不建议把属性强行记下来，那样很累，
复制链接

扫一扫