个性化阅读
专注于IT技术分析

如何更容易地快速学会网格布局?CSS Grid Layout基本设置入门教程详解(一)

一、引言

CSS网格布局(CSS Grid Layout)已逐渐在前端设计中,显露出它的强大用处。该二维布局系统类似boostrap中的栅格布局系统,相对来说CSS的网格系统更强大,更可控,可以从水平方向和垂直方向调整网格的大小、对齐方式、间隔等。它的使用和flex布局类似,是flex之后最好的布局系统了,它可以让你快速搭建好基本的界面,而不用担心各种奇异的问题。

二、Grid网格布局和其它布局有什么不同?

1、table布局

1)布局在做诸如表格的时候是比较合适的,但是多数时候并不推荐使用这种布局;

2)Table布局第一大问题就是会造成页面延迟渲染,造成资源损耗;

3)另一个问题就是table的标签没有语义化,td还是tr一时还分不清,对前端设计和后端设计都不太友好。

2、float布局

float布局在实际使用中,关于元素清除浮动的问题还是要仔细设计,在排版方面还是挺好的。

3、position布局

CSS的这个position属性用起来没那么顺手,简单的relative和absolute有时都要调试很久,而且兼容性也不好,尽量少用。

4、flex布局

flex弹性布局比较容易上手,而且实现效果也比较简便,flex主要解决一维布局的问题。

5、Grid网格布局

Grid网格布局是二维布局系统,在水平和垂直方向更自由地控制元素,可以和flex配合使用。

三、WEB浏览器和移动设备支持

CSS Grid的兼容性图表

随着Grid布局规范的更新,多数浏览器都提供了Grid Layout的支持,微软的IE10-11提供的是过时的实现(IE总是不按套路出牌)。Grid网格布局是CSS布局的未来,配合Flex和媒体查询,实现更健壮和强大的响应式网页。

四、Grid网站布局实例快速预览

CSS Grid布局效果图

五、Grid网格布局基本概念

CSS Grid网格布局图解

在深入学习Grid网格布局前,我们需要了解一下Grid中的几个重要概念,布局设计中都需要依据这些概念。

1、Grid Line(网格线):上图中水平和垂直的线,成为网格线,布局中,网格线的用处是设置间隔距离;

2、GridTrack(网格轨道):相邻两条水平网格,或相邻两条垂直线之间的空间,称为网格轨道;

3、Grid Cell(网格单元):相邻两条水平线,和相邻两条垂直线相交构成的空间,称为单元格。如图红色块,单独占据一个单元格,Grid Item(网格子元素)和网格单元相似;

4、Grid Container(网格容器):网格容器容纳所有网格单元,如上图,蓝色框的就是一个网格容器,我们主要是在该容器上进行布局;

5、Grid Area(网格区域):任意4条网格线围起来的空间,网格区域的面积大于或等于网格单元格。

另外,因为Grid网格布局是二维布局,所以很有必要有个轴线方向的概念,默认情况下:界面的坐标原点在左上角,X方向水平向右,Y方向水平向下。轴线方向可以让你在布局中更有方向感。

六、Grid网格布局设置细节详解

布局主要分为两部分:容器布局和单元格布局。器布局是对容器和单元格的总体设置,单元格布局是对其自身的单独设置。

1、容器布局

1)定义网格容器

.container{
    display: grid;
}

以上代码创建了一个新的网格容器,display有两个可选值:

1)grid:创建块级网格容器

2)inline-grid:创建内联网格容器。

2)设置网格轨道大小(Grid-template-columns、grid-template-rows)

网格轨道分为列方向的轨道(水平方向),和行方向的轨道(垂直方向)。列的英语是column,行的英语是row。当我们确定这两个方向的轨道的大小,也就确定了一个单元格,如下:

.container{
    display: grid;
    grid-template-columns: 200px 200px 200px 200px 200px;
    grid-template-rows: 52px;
    grid-column-gap: 20px;
}
设置网格轨道大小

Grid-template-columns、grid-template-rows,用于设置行列的网格轨道的大小和个数,上面代码中5个200px的意思,就是:平方向5个元素,每个元素的宽度(即轨道大小)为200px。两个方向的设置规则一样。

Grid-column-gap用于指定列方向单元格的间隔,gap是间隔的意思。

对于以上代码你可以使用repeat简化写法,另外若需要使用自适应宽度可以使用fr单位:

.container{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 52px;
    grid-column-gap: 20px;
}

完整语法如下:

.container {
    grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
    grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

Track-size:网格轨道大小;

Line-name:网格线的名称,自定义。

可参考以下写法:

.container{
    display: grid;
    grid-template-columns: [line-start] repeat(5, 1fr) [line-01] 200px [line-end];
    grid-template-rows: [line-02] 52px [line-03];
    grid-column-gap: 20px;
}

3)设置网格区域(grid-template-areas)

Grid使用一组或几组字符串对网格区域命名,对网格容器进行划分。一组字符串表示一行的网格区域,每一组的字符串名称数量都必须相同,语法如下:

.container {
    grid-template-areas:
            "<grid-area-name> | . | none | ..."
            "...";
}

Grid-area-name:自定义的区域名称字符串;

. :表示一个空网格单元,当你在某位置想留空时你可以使用点;

None:不使用网格区域。

另外,一般设置网格区域后,需要通过子元素的属性grid-area,指向所属的网格区域。

例子:

.container{
    display: grid;
    grid-template-columns: auto 35% 15% auto;
    grid-template-rows: auto;
    grid-template-areas:
        ". head head ."
        ". post sidebar .";
}

.container .head{
    grid-area: head;
    height: 60px;
}

.container .post{
    grid-area: post;
    height: 500px;
}

.container .sidebar{
    grid-area: sidebar;
    height: 500px;
}
设置网格区域效果图

使用简写形式grid-template

Grid-template属性是grid-template-rows、grid-template-columns、grid-template-areas的简写属性,语法如下:

.container {
    grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

4)设置网格线大小

网格线大小即行列单元格之间的间隔大小,使用grid-column-gap、grid-row-gap设置。

.container {
    grid-column-gap: <line-size>;
    grid-row-gap: <line-size>;
}

5)设置网格子元素对齐方式

justify-items设置元素在行轴线方向的对齐方式,align-items设置元素在列轴线方向的对齐方式,具体的还需要自己亲自写代码调试,因为下面还有一种对齐方式设置,容易搞混。

两个属性的可选值:

Start:将网格元素对齐到起始处;

End:将网格元素对齐到结束出

Center,(垂直)水平居中元素;

Stretch:填充单元格大小。

简写形式place-items

Justify-items和align-items的简写形式:

.container {
    place-items: <align-items> <justify-items>;
}

6)设置网格单元格对齐方式

Justify-content:设置网格沿着行轴线方向的对齐方式

Align-content:设置网格沿着列轴线方向的对齐方式。

Place-content:<align-content> <justify-content>,简写形式。

Justify-content和align-content的可选属性值如下:

Start:网格对齐到开始处;

End:网格对齐到结束处;

Center:居中对齐;

Stretch:自动填充单元格;

Space-around:两端放置一半空间,中间空间均匀;

Space-between:靠两端对齐,中间空间均匀;

Space-evenly:两端空间均匀,中间均匀;

7)其它设置

自动生成网格轨道的设置

当网格项过多时,Grid会自动生成隐式轨道,你可以自定义指定,隐式轨道的大小:

.container {
    grid-auto-columns: <track-size> ...;
    grid-auto-rows: <track-size> ...;
}

Track-size即隐式轨道的大小。

设置自动放置网格项的方式

.container {
    grid-auto-flow: row | column | row dense | column dense
}

Row:自动填充每行;

Column:自动填充每列;

Dense:尝试使用已存在的网格填充。

简写形式Grid

Grid属性是grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow的简写形式,举例:

.container {
    grid: [line01-start] ". head head" 1fr [line01-end]
    [line02-start] "footer footer footer" 25px [line02-end]
    / auto 50px auto;
}

2、网格单元格

1)设置网格单元格大小

网格项默认占据一个轨道,单元格的大小主要通过指定网格项的开始位置和结束位置,设置网格项的大小

主要语法如下:

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

Line:网格线名;

Number:网格轨道数量;

Name:网格名;

Auto:自动。

简写形式:grid-column、grid-row:

.item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

2)设置网格所属区域

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

3)网格单元格的对齐方式

Justify-self:单元格沿着行轴线的对齐方式

.item {
    justify-self: start | end | center | stretch;
}

Align-self:单元格沿着列轴线的对齐方式

.item{
    align-self: start | end | center | stretch;
}

简写形式place-self:<align-self> <justify-self>

七、完整示例源码

github下载地址:https://github.com/onnple/grid_layout

八、结语

Grid网格布局是非常灵活强大的,其使用习惯和flex类似,只不过flex只能确定单一的主轴线方向。Flex布局和Grid布局是前端设计师必备的技能,在众多的页面设计中,掌握CSS的核心布局元素有利于你在开发的道路上走得更远!

赞(0) 打赏
未经允许不得转载:srcmini » 如何更容易地快速学会网格布局?CSS Grid Layout基本设置入门教程详解(一)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏