读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. html/css
  3. 正文

grid网格布局

2020年8月12日 308点热度 0人点赞 0条评论

网格布局

网格布局在页面中更适合二维布局,将页面划分为多个区域,并且定义这些区域的大小、位置和层次等等这些关系。

特点:

1、在创建网格的时候,可以使用固定的轨道尺寸,为此有新的单位fr来创建有弹性尺寸的网格。也可以使用像素单位【fr是空间的一个等份单位】;

2、可以使用行号、行名称或者设置一个网格区域来精确定位元素。也可以使用一种算法来控制未给出明确网格位置的元素;

3、创建额外的轨道来包含元素【定义一个显示的网格,它会处理你添加在网格外面的内容,它会自动增加行和列,尽可能容纳所有的列】;

4、对齐控制;

5、控制重叠内容。

在元素声明display:grid或者display:inline-grid,将元素设置为网格容器,该容器内的子元素就成为了网格元素。

定义行和列

在将一个元素设置成为网格容器之后,那接下来就是如何将该容器划分为多少行和列了;

grid-template-columns:该属性将网格容器划分为多少列来显示,并可以定义每一列的宽度,如:

        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
        </div>

css:

            .container {
                width: 600px;
                border: 1px solid red;
                display: grid;
                grid-template-columns: 100px 100px 50px;
                margin: 0 auto;
                grid-gap: 20px;
            }

            .container div {
                border: 1px solid blue;
            }

如果设置列同样的宽度,则可以这样写:

grid-template-columns: repeat(2, 100px) 1fr;

同样,网格容器设置行宽度也是一样的语法。

grid-template-areas:用指定的网格区域名称来定义网格,使用grid-area定义区域名称。代码:

        <div class="container">
            <div class="test">1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
        </div>

css:

            .test {
                grid-area: Div;
            }

            .container {
                border: 1px solid red;
                display: grid;
                grid-template-areas: " Div Div . . . .";
                margin: 0 auto;
            }

            .container div {
                border: 1px solid blue;
                text-align: center;
                line-height: 200px;
            }

以上三个属性简写为:grid-template,语法为:grid-template-areas grid-template-rows/grid-template-columns

网格(行与列)间隙

在网格容器中设置好行和列之后,行与行之间、列与列之间是紧凑一起的,以下属性可设置行或者列之间的间隙:

column-gap或者是grid-column-gap(这个是老版本的写法),这个属性设置列与列之间的间隙;

row-gap或者grid-row-gap,该属性设置行与行之间的间隙。

以上两个属性可以简写为:gap或者grid-gap,语法:grid-row-gap grid-column-gap

实例代码:

    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>

css :

        .container{
            width: 900px;
            border: 1px solid  red;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px auto  50px;
            grid-gap: 30px;
        }

        .container div{
            border: 1px solid  blue;
            text-align: center;
            line-height: 50px;
        }

grid网格布局插图

行、列对齐

主轴:规定子元素沿着某个方向排列,一般默认是水平方向;侧轴就是与主轴垂直的方向。

如上图所示,所有的列默认从左到右排列,所有的行是默认从上往下排列。关于设置网格容器元素对齐的属性:【center、end、start、stretch(是默认值,填充整个单元格)】

1、justify-items,设置网格元素在主轴上的的对齐方式;

2、align-items,设置网格元素在侧轴上的对齐方式;

当所有网格元素大小总和小于网格容器大小时,那么可以设置所有网格元素在容器内的对齐的方式:

1、justify-content,网格元素在水平方向上对齐;

2、align-content,网格元素在垂直方向上对齐。

以上的两个属性只有在所有子元素小于容器元素时才有效!!!

隐式网格和显示网格

当网格元素数量多于单元网格数量时,会自动创建隐式的轨道,这就是隐式网格

显式网格:使用grid-template-rows、grid-template-columns和grid-template-areas手动定义固定的网格线和网格轨道的grid,就是显式网格。

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: CSS
最后更新:2020年9月23日

读心悦

韦永愿的个人博客

打赏 点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

读心悦

韦永愿的个人博客

标签聚合
CSS 闲谈 node taro hook JavaScript 悦读 redux mysql canvas 随笔 小程序 Nginx 阅读 vue git react Echarts flutter
分类
  • flutter (11)
  • html/css (23)
  • Javascript (32)
  • Mysql (2)
  • node (2)
  • React (29)
  • vue (1)
  • 小程序 (43)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (12)
最新 热点 随机
最新 热点 随机
JavaScript的深浅拷贝【笔记】 最近的一些心里事儿 JavaScript的Object数据类型转换 JavaScript中 + 隐式类型转换 JavaScript的== 的隐式类型转换 JavaScript数据强制类型转换
微信小程序设置体验版本和线上版本的访问地址JavaScript颜色的工具函数redux简单的笔记JavaScript的数据类型如果有来生JavaScript数据强制类型转换
JavaScript数据强制类型转换 react函数编程Hook笔记 Flutter开发中时间戳转化为字符串【源码】 自定义导航中wx.getSystemInfoSync()的作用 React组件传值 我在看《吉他兄弟》

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号