首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

grid-auto-属性(CSS设置)

发布时间:2021-09-05 10:26 所属分类:热门主题 浏览次数:
  grid-auto-flow属性(CSS设置)
  一、grid-auto-flow出现的背景
  Grid布局要想玩得666,grid-auto-flow是绕不开的需要深度掌握的CSS属性。
  Grid布局就像农村土改分土地。
  政府会把土地分成一块一块的,然后这一块是张三的,那一块是王二的。
  这个划分就是通过grid-template属性。
  比方说:
  .fileds{
  display:grid;
  grid-template:1fr1fr/1fr1fr;
  }
  就是把这块土地分成两行,两列4块田地。
  然而应用到具体的场景,事情往往就出乎意料的复杂。
  例如:
  如果日后村里搬迁了几户新住户,那该怎么划分?
  4块田地分给张三和王二,你说是横的两块地给张三呢,还是竖的两块地给张三?
  孤寡老人李大爷过世了,他的田地是否可以分给后面的人?
  这些意料之外的场景单靠grid-template属性肯定捉襟见肘,此时,就需要grid-auto-flow属性出马。
  grid-auto-flow属性可以定义Grid布局中每一个Grid子项“自动流动”状态。
  二、了解grid-auto-flow的语法
  grid-auto-flow:[row|column]||dense
  因此,下面这些写法都是合法的:
  grid-auto-flow:row;
  grid-auto-flow:column;
  grid-auto-flow:dense;
  grid-auto-flow:rowdense;
  grid-auto-flow:columndense;
  其中:
  row
  多的格子一行一行陈列。默认值。
  column
  多的格子一列一列排列。
  dense
  多的格子空白填充。
  各个关键字值具体什么意思,我们还得看案例才能明白。
  三、row和column属性值基础
  1.默认值row
  从天上掉下来一个宝贝容器,定睛一看,容器元素标签名是zxx-grid,好巧,正好应用的CSS声明就是display:grid,如下:
  zxx-grid{
  display:grid;
  }
  然后很巧的是还有若干子元素,如下:
  <zxx-grid>
  <zxx-item>格子1</zxx-item>
  <zxx-item>格子2</zxx-item>
  <zxx-item>格子3</zxx-item>
  <zxx-item>格子4</zxx-item>
  <zxx-item>格子5</zxx-item>
  <zxx-item>格子6</zxx-item>
  <zxx-item>格子7</zxx-item>
  <zxx-item>格子8</zxx-item>
  <zxx-item>格子9</zxx-item>
  </zxx-grid>
  <zxx-grid>元素除了应用了display:grid没有任何其他CSS,因此,所有的子元素的grid-auto-flow“自动流动”的状态是其默认值。
  grid-auto-flow的默认值是row,row的中文意思是“行”,也就是所有的子元素一行一行显示,优先水平排列。
  于是,最终的网格轮廓结构会是下图这样:
  CSSgrid-auto-flow深入理解
  更进一步
  如果我们使用grid-template属性指定Grid的列数为2列,如下:
  zxx-grid{
  display:grid;
  grid-template:auto/1fr1fr;
  line-height:40px;
  }
  大家就会看到Grid子元素的排列流向是下面这样的,先是水平排列,然后再到下一行再水平排列,一直到最后不断循环:
  CSSgrid-auto-flow深入理解
  大家可能觉得理所当然就应该这样排列,太天真了!
  CSSgrid-auto-flow深入理解
  大家稍后对比column属性值的效果就知道Grid子项的排列顺序并不是一成不变的了。
  2.关键字值column
  如果我们设置grid-auto-flow的属性值是column,column的中文意思是“列”,则表示“自动流动”状态的子元素全部都一列一列显示。
  假设容器元素CSS如下:
  zxx-grid{
  display:grid;
  grid-auto-flow:column;
  }
  则几个子元素的布局效果会是下面截图这样,全部纵排了:
  CSSgrid-auto-flow深入理解
  发现没有?使用grid-auto-flow属性可以非常简单实现子元素个数不固定的等分布局效果,就是值设置为column就可以了。
  更进一步
  这里,我们同样指定我们的Grid布局是2行,CSS代码如下:
  zxx-grid{
  display:grid;
  grid-template-rows:1fr1fr;
  grid-auto-flow:column;
  line-height:40px;
  }
  大家就会发现Grid子元素的排列流向和row属性值就不一样了:
  CSSgrid-auto-flow深入理解
  是优先垂直方向排列,然后再到下一列往下排列,一直循环往复到最后一列。
  由此,我们可以得出结论,grid-auto-flow属性会影响Grid布局的排列顺序。
  3.排序与布局实例
  有人在微信粉丝群里面问了下面这个问题,实现下图所示布局:
  CSSgrid-auto-flow深入理解
  这个布局效果,最简单的方法就是用浮动3个图片都设置float:left就可以了,就这么简单。
  但是如果我们这里的图片不是3个,而是5个(如下图),那么浮动就无能为力了。
  CSSgrid-auto-flow深入理解
  此时,则可以试试Grid布局,让第一个子项横跨左侧两个格子,然后后面4个格子按照grid-auto-flow:column的流向排列即可。
  HTML代码如下:
  <zxx-grid>
  <zxx-item><imgsrc="./xugou-1.jpg"></zxx-item>
  <zxx-item><imgsrc="./xugou-2.jpg"></zxx-item>
  <zxx-item><imgsrc="./xugou-3.jpg"></zxx-item>
  <zxx-item><imgsrc="./xugou-4.jpg"></zxx-item>
  <zxx-item><imgsrc="./xugou-5.jpg"></zxx-item>
  </zxx-grid>
  CSS代码如下:
  zxx-grid{
  display:grid;
  grid-auto-flow:column;
  grid-template:1fr1fr/1fr1fr1fr;
  grid-template-areas:"abd""ace";
  grid-gap:6px;
  }
  zxx-item:first-child{
  grid-area:a;
  }
  则有如下图所示的布局效果:
  CSSgrid-auto-flow深入理解
  而且整个布局是弹性变化的,如下视频所示(不动可以点击播放):
  对吧,布局效果还是很酷的。
  最后,测试下grid-auto-flow:column在这个例子中所起的作用,我们打开控制台,注释掉grid-auto-flow:column这句CSS声明,则我们会得到下图所示的布局效果,图2到图5都是水平平铺呈现,这个效果Float浮动就可以实现。
  CSSgrid-auto-flow深入理解
  对应的Demo页面
  上面的例子有专门的demo演示页面,您可以狠狠的点击这里:grid布局实现图像A|B+C布局demo
  //zxx:Chrome浏览器的图片height:100%似乎有bug,Firefox浏览器没有这个问题
  四、row和column属性值深入
  第三小节演示的几个案例都是我们所有的格子都已经规定好的,但是实际开发,Grid格子的数量可能是动态的,无论是grid-template还是grid-template-areas往往就没法兼顾全部的子元素,此时,Grid布局又该如何表现?
  为了更进一步展示关键字值column的效果,我们来看一个稍微再复杂一点的例子:
  我们设定网格模板是2x2,也就是前4个元素按照指定网格陈列,后面的子元素auto-flow自由流动。相关CSS如下:
  zxx-grid{
  display:grid;
  grid-template:1fr1fr/1fr1fr;
  grid-auto-flow:column;
  }
  则最终效果如下:
  CSSgrid-auto-flow深入理解
  为什么会有上图这样的效果呢?
  首先大家一定要搞清楚一点,1fr1fr并不等于50%50%,虽然很多时候表现是一样的,但只是grid格子正好和设定数量一致的时候。1fr1fr更准确的含义是,可用剩余空间分别50%50%。
  在本例中,格子5~格子9属于“放任自流”的盒子,因为grid-template:1fr1fr/1fr1fr只指定了4个格子的尺寸,那剩余的5个格子怎么办呢?
  那就是grid-auto-flow属性大发神威的时候。
  这里grid-auto-flow设置的属性值是column,也就是没有指定模板的剩余5个格子垂直按需排列。如下图标注:
  CSSgrid-auto-flow深入理解
  由于没有指定宽度,因此,格子的尺寸就fit-content,根据内容的尺寸来。
  在实际开发的时候,我们往往只要指定好垂直列的个数和宽度分配比,无论多少个grid子元素,都会依次排列好,其最底层最根本的原因其实是grid-auto-flow:row在起作用。
  例如:
  zxx-grid{
  display:grid;
  grid-template-columns:1fr1fr;
  }
  效果是下面这样,9个格子了,一个一个排的非常整齐,因为“自动流动”默认是水平的。
  CSSgrid-auto-flow深入理解
  五、不太好懂的dense属性值
  最后,再讲讲dense属性值。
  dense单从字面含义是不太好理解的,dense的中文意思是“密集的”,“稠密的”,“浓密的”。
  密集的是树林,稠密的是奶昔,浓密的是头发,跟Grid布局好像不搭边吧。
  实际上,这里dense应该用一种更感性的方式去体会这个词的含义。
  在本文一开始提到了一个引子“孤寡老人李大爷过世了,他的田地是否可以分给后面的人?”
  比如说村里9户人家,每一户都分得了一块田地,大家的田地都是紧密相连的。
  结果孤寡老人李大爷和王大爷相继去世。于是,就有两块田地是空缺的,因为有空缺,所以这个时候,如果我们使用无人机从上方拍一个照片,则田地是稀疏的,不是紧密的。
  这个时候,村里又来了两户新人家,也要分田地。
  如果是dense,则优先分配之前李大爷和王大爷留下的空缺的土地,因为这样会让整片田地没有空缺,是“密集的”,“紧密的”。
  grid-auto-flow:dense也是类似的意思。
  dense理解案例
  我们可以人为制造出稀疏布局结构(前面几个Grid格子留空),代码如下:
  zxx-grid{
  display:grid;
  grid-template-columns:1fr1fr;
  }
  zxx-item:first-child{
  grid-column-start:2;
  }
  本文来源:码农网
  本文链接:https://www.codercto.com/a/99949.html
作品标签:

评论列表(共299人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    攻略 内蒙注册会员
    2021-09-05 6:18:26

    松肥美、排水杰出的微酸性土壤。 (二)绿萝 绿萝是阴性植物,忌阳光直射,喜阴,合适生善于疏松、富含腐殖质的酸性土2/1-210Z21P917.jpg" /> 环境设计通过一定的组

    回复
用户头像图片
    修效果图注册会员
    2021-09-05 19:26:23

    划手册全套模板事例赏识vi规划手册过程vi规划手册过程vi规划手册过程 vi规划手册过程: grid-auto-属性(CSS设置齐名的我国首要节日之一。受中华文化的影响,中秋节也是东亚和东。。。

      用户头像图片
        一、彩色注册会员
        2021-09-05 12:4:18

        @修效果图:grid-auto-属性(技术及管理工作,部分毕业生能够到有关院校攻读园林科学及其相关学科的硕士研究生。 ~~~

    回复
用户头像图片
    斯邦威服饰股游客
    2021-09-05 2:14:54

    游客36431:grid-auto-属性limg/210829/1-210R91P608.jpg" /> 顶层设计规划 泪纵横儿啊,别再上班了,都瘦成这样了,五一好好歇息吧! 8、五月的天更蓝,五月的海更宽,五月的花更繁,五月的风更软,五月的心更

    回复
用户头像图片
    道构成,注册会员
    2021-09-05 9:8:22

    过grid-template属性。 比方说: 魂铸盛世

    回复