记录了我在组内的技术分享, 有同样需求的同学可以参考一下
分享全程下来时间大约 45分钟
最终画图如下:↓
一. 到底能不能用在工程??(兼容性)
整体dom结构如下
固定的样式
开启布局时, 我们打开调试模式鼠标悬停在dom上会出现网格
与flex不一样, 单纯的开启布局并不会影响元素的布局,不会压缩抻拉宽高.
grid-template-columns 定义把dom横排分成几份,每份宽度是多少.
横排排列
定义重复的部分
我们想实现如下效果:
重复的类型也可以多样
auto-fill属性 根据设定的宽度,自动填充
技巧跳列
比如我们把横排分为3个格子每个100px, 但是我只放入两个元素, 分别在第1个与第3个格子, 那么我们可以使用一个技巧, 就是中间放一个空元素, 而这个空元素应尽可能小的消耗内存, 那么可以尝试放一个br标签, 当然这种方式不推荐, 布局上会给其他同学造成一些困扰, 代码如下:
fr
我们知道在flex布局里面, 比如我写flex:1, 他代表着在flex布局里面占总份数里面的一份, grid里面也有类似的属性, 而且更加的定制化语义化, 他就是fr.
下面这段代码的意思就是把dom分成5份, 每份就是占一份的宽.
大家瓜分剩余空间
auto
下面设置最小宽与最大宽
当父级320px宽
当父级200px宽
距离产生美， 这么多格子当然需要点距离啦。
固定代码
添加：
添加：
当然了，这两个属性可以简写为 或者
给父级一个padding：10px
注意： 暂时不支持这样写也就是说不固定的间距需要想别的办法了。
我们可以在画格子的时候， 把间距也当格子画。
格子的定位从横向变为了纵向
这里我们就可以解释一下最开始说的对齐方式的原理。
第一部分： 网格的位置
居中
居右
居右下
简洁写法，直接定义两个属性
奇怪的取值范围（重点！）
取值范围：
取值范围：
奇怪的点1：align-content不可以用 left right
奇怪的点2：flex-end这种属性居然有效
奇怪的点3：可以用left right 但是不可以用 top bottom
真是奇奇怪怪没有脑袋。。。。我建议采用这样专属grid的意义更加明确。
第二部分： 单元格的对齐
每个小网格就像是excel的一个单元格， 那么这些单元格的排布方式也很有趣，第一种就整体的排布，第二种是自身的排布。
- 前3个收到父级的` align-items:`影响所以上下左右居中。
- 第4个自身布局优先级最高， 出现在右下角
- 6与7是因为未设置宽高的情况下，设置了属性导致自身是否被拉伸。
填满单元格的宽度（默认值）
通过这里的学习， 我们就能明白最开是的居中方式了， 面试的时候你可以大展身手了。
定义格子从哪里开始, 到哪里结束, 这样可以不用br这种站位标签了.
这种写法突然出现 '/'斜线, 我感觉挺不舒服的, 不知道为啥这么设计.
要注意, 这种布局方式会有计算量的, 我个人不太建议这样玩....
中规中矩的思维没法走的更快， 让我来抛砖引如一下。
坑点: 这四个角有点错乱,你计算好了, 但是其他同学不一定计算的对, 需要把他封装起来.
扩展: 这四个角我们可以放一点花样, 应该挺好看的...
不用写结尾了, 表明站几个就好了, 当然也有row属性可以设置.
也就是说 span 3 意思就是当前位置 往后3个格子都是我的了
有的时候就要直接一点, 这个知识点才是grid的灵魂.
我们照常使用为dom画格子, 然后为每个单元格定义一个名字, 什么名字都可以, 如果用不上的单元格名字就定义为'.', 举个例子如下:
上面的代码我们可以给内部dom自身一个属性, 那么 dom就会占据最上面四个格子的位置, 简直太直接了, 相当于多了个缩略图.
只能写出'矩形'的方阵, 并且必须是一体的, 俩个'header'不连贯东一个西一个也不会生效.
别看它简单, 接下来可以做一些有意思的事情了.
我画了一个简易的游戏, 把点击的部位变黑, 当时设想是做最强大脑里面的那个奇偶消融游戏, 但是grid布局有自身的局限后来放弃了, 相关的问题我通过图片展示一下.
当我变换小球位置的时候, 前面的小球会补充之前的位置, 导致位置信息不好算了, 当然我们可以把每个小球固定, 然后在上面覆盖一层, 但这样做也没必要用grid布局了.
之前还画了个'大风车'和'八卦图', 就不在这里展示了, 但是我画了个笑脸的代码还是分享给大家把:
也就是开局那张图, 使用grid的来画这张图简直舒服!!
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/81901.html