读心悦

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

grid网格布局

2020年08月12日 266点热度 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年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

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

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
阅读 mysql CSS JavaScript canvas flutter Nginx 随笔 Echarts hook redux react 悦读 小程序 vue node git 闲谈 taro
推荐文章
  1. css关于居中的方式
  2. 小程序全局和局部自定义导航栏样式
  3. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
  4. css水平垂直居中的几种方式
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (40)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号