您现在的位置是：网站首页> 编程资料编程资料

使用CSS Grid布局实现网格的流动CSS Grid布局教程之网格单元格布局CSS Grid布局教程之浏览器开启CSS Grid Layout汇总CSS Grid布局教程之什么是网格布局css 限定GridView宽度并加上滚动条YUI 中的 Grids CSS值得关注和学习的-CSS教程-网页制作-网页教学网5分钟教你学会 CSS Grid 布局

2021-09-05 850人已围观

简介 这篇文章主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下

HTML文档中有文档流，其实在CSS Grid Layout中有网格流。简单点理解就是，在一个被显式声明为网格的容器中，其所有子元素自动被认定为网格单元格，而这些网格单元格在没有被显式设置明确位置时，浏览器将会自动为这些网格单元格的位置进行计算，按照先后顺序从左向右，或从上到下排列。在这里把这种方式称之为网格的流动。

在具体介绍网格流动相关内容之前，我们先一起来回忆一个简单的效果。平时在Web页面制作当中，经常会碰到产品列表展示页面，或者说相册展示页面的效果。如下图所示：

实现上图的效果，大家平时大多会采用float和display:inline-block等方法实现。但这些方法或多或少存在一定的局限性。那么在CSS Grid Layout中，实现这样的布局相对而言会简单多。比如通过网格线，或者网格区域来明确指定各自的位置。不过这样一来，就存在一个潜在的问题：如果在不同的设备上浏览，每行展示的数量不一致时，需要在媒体查询中为每个网格重新指定位置，这变得更为复杂。也不是我们希望的效果。其实在网格布局中还有一种更方便的方法，就是采用网格流来实现。这也是我们今天要说的内容 。

网格的自动流

在CSS Grid Layout中，给元素显式的声明网格，如果没有显式的通过网格线或者网格区域明确指定网格的位置，那么浏览器将会对容器内子元素（网格单元格）进行自动布局。

来看一个简单的示例，假设容器.wrapper中有14个.box(A~O)。容器.wrapper显示的声明为网格，并且不对任何.box做显式的位置定位，这个时候浏览器会自动为.box进行自动布局。为了更好的看到效果，在这个示例中给偶数的.box设置了一个green背景色：

HTML


复制代码
代码如下:


A

B

C

D

E

F

H

I

J

K

L

M

N

O


CSS


复制代码
代码如下:

.box {
background: orange;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 3em;
}
.box:nth-child(even){
background: green;
}
.wrapper {
width: 500px;
border: 1px solid orange;
padding: 15px;
margin: 20px auto;

display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: auto ;
}

效果如下：

在线案例

不过离文章所示效果还是略有差距，每个.box之间没有间距，我尝试着给.box设置margin值：

在线案例

从效果图中可以明显看出，盒模型解析已做出变化：

上图中可以得知，在CSS Grid Layout中盒模型大小计算变成：容器width = margin-left + margin-right + padding-left + padding-right + content width + border-left-width + border-right+width。比如我们这个示例中，.box设置width:100px，并且有一个margin-right:15px;那实际上.box的内容宽度仅只有85px。这样一来与文章开头示例相左，如果需要做到一致效果，还需对其做一定的变化。这个变化就是对容器.wrapper的宽度和grid-template-columns属性值：


复制代码
代码如下:

.wrapper {
width: 560px;
border: 1px solid orange;
padding: 15px;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(5, 115px);
grid-template-rows: auto ;
}

效果如下：

在线案例

或许你会感觉这并没有强大到哪呀，跟以前使用float有太多的变化吗？如果你觉得没有，那请继续往下阅读。

网格流动——列

网格的自动流，在默认情况下都是以行来给元素布局，也就是说grid-auto-flow取值为row。让网格单元格沿着行布局，直到没有可放区域（列的方向），网格单元格会自动换行到下一行排列。哪怕没有显式的声明网格，浏览器也会为创建隐式网格的轨道，用来放自网格单元格。

在实际使用中，可以使用grid-auto-flow属性来做修改，只需要把其默认值row设置成column。网格中的单元将会按列显示，如果需要，还会自动添加列。

一起来看一个示例，你将更易理解：


复制代码
代码如下:

.wrapper {
width: 560px;
border: 1px solid orange;
padding: 15px;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(6, 115px);
grid-template-rows: 115px 115px 115px;
grid-auto-flow: column;
}

效果如下：

在线案例

网格流与定位元素

前两介绍的都是网格容器所有子元素都是按照网格自动流排列。从上面简单的示例中可以得知，只要是网格容器中的子元素，通过grid-auto-flow都可以让其在网格容器中按列，或按行自动排列。可往往有些时候，有些网格需要做一些特殊定位处理。如果其中某个或某几个网格做了特殊处理，那么其他网格还会自动排列？我们将带着这个问题来一起看一个简单的示例：


复制代码
代码如下:
.wrapper { width: 560px; border: 1px solid orange; padding: 15px; margin: 20px auto; display: grid; grid-template-columns: repeat(5, 115px); grid-template-rows: auto ;}.b { grid-column: 3 / 6; grid-row: 2 / 3; outline: 2px solid red;}.f { grid-area: 3 / 1 / 4 / 6; background-color: #f36; outline: 2px solid red;}

效果如下：

在线案例

在这个示例中，盒子.b,通过网格线，将B重新定位新位置上，但这样并没有影响网格的自动流。.b所在的默认位置将由其后面的.c元素补上。同样的,.f元素重新定位后，别的元素补上。而且.f扩展占有多个网格单元格，那么其他的单元格就会自动往后移。如上图所示。

总结

文章中通过简单示例向大家演示了CSS Grid Layout中网格单元格自动排列的实现方法，以及如何通过grid-auto-flow来显式设置自动排列的方向。最后用一个示例向大家展示了，自动排列的网格中，其中某个或某向个网格单元格显式定位后，是否会对网格自动流造成一定的影响。不过如果你看到最后一个示例时，你将不会再质问这个问题。因为效果告诉你一切。

另外网格自动流配合margin和媒体查询将能更好实现Web中相册相关布局，产品展示相关布局。当然你也还可以在这个基础上扩展出更有意义的布局效果。

上一篇：纯css3制作网站后台管理面板ai怎么使用CSS属性面板?Dreamweaver中CSS面板该怎么设置?CSS 实现侧滑显示留言面板的网页组件功能

下一篇：CSS Grid布局教程之什么是网格布局CSS3中的display:grid，网格布局介绍js和CSS3实现带详情页面的炫酷网格布局特效CSS Grid 网格布局全解析CSS网格布局的示例代码在CSS网格布局中的列中填充项目的实现方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网