记录了我在组内的技术分享, 有同样需求的同学可以参考一下
分享全程下来时间大约 45分钟
最终画图如下:↓
一. 到底能不能用在工程??(兼容性)
老生长谈的问题了, 但也是决定性的问题,如下图:
对于不用兼容ie浏览器的工程可以玩起来了, grid也不算新技术了, 技术的发展需要coder的推动, 有时候问问自己不用grid的原罪是不是’懒得学’哈哈哈哈, 我查了一下 chrome 57版本是 2017.3月发布的 .
ie使用的写法也可以有效, 但是网上看到很多同学遇到了未知错误, 所以如果真的必须兼容ie的话还是不要使用grid.
grid不会代替flex, 相反他两位是非常棒的搭档, 配合使用简直开始螺旋人生, grid布局可以打破dom位置的限制,使用不好的话容易造成语义混乱, 导致鲁棒性下降, 这次我们就一起来探究一下grid布局的实战场景.
整体dom结构如下
讯享网
固定的样式
讯享网
开启布局时, 我们打开调试模式鼠标悬停在dom上会出现网格
与flex不一样, 单纯的开启布局并不会影响元素的布局,不会压缩抻拉宽高.
讯享网
grid-template-columns 定义把dom横排分成几份,每份宽度是多少.
这里就是把dom分为4段, 每段100px宽, 然后我们就可以往里面放内容了.
横排排列
定义重复的部分
我们想实现如下效果:
可以这样写:
重复的类型也可以多样
可以如下的方式书写:(要注意这里只有一个’逗号’)
auto-fill属性 根据设定的宽度,自动填充
技巧跳列
比如我们把横排分为3个格子每个100px, 但是我只放入两个元素, 分别在第1个与第3个格子, 那么我们可以使用一个技巧, 就是中间放一个空元素, 而这个空元素应尽可能小的消耗内存, 那么可以尝试放一个br标签, 当然这种方式不推荐, 布局上会给其他同学造成一些困扰, 代码如下:
讯享网
fr
我们知道在flex布局里面, 比如我写flex:1, 他代表着在flex布局里面占总份数里面的一份, grid里面也有类似的属性, 而且更加的定制化语义化, 他就是fr.
下面这段代码的意思就是把dom分成5份, 每份就是占一份的宽.
大家瓜分剩余空间
auto
auto关键字, 单独存在时功能与1fr差不多， 但是语义化更明显
auto与1fr的区别， 他不参与fr的计算规则， 所以与fr同时使用会被挤成自身宽度
下图里面的3就是靠自身撑起的宽度
下面设置最小宽与最大宽
当父级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的来画这张图简直舒服!!
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/138032.html