有人说：面试是一种学习。
但问题是：面试过后，又该如何学习？
今天来分享一波笔试题，还找了下大佬来帮忙分析了下，总结了几个小问题
笔试题之——关于 grid 网格面试题：
笔试题剖析：
这道题考核的有两点：
第一点是左右固定，中间自适应的三栏式。如果这个不理解，那么这道题就没法继续。
三栏式是前端布局中的经典案例，以前的解决方式有圣杯布局，双飞翼布局等。所以考核的基础就是掌握这些经典案例。
第二点再接着才是重点，用 grid 如何实现？grid 出来还没多久，这就考核了作为一个前端开发工程师对于最新技术动向的掌握情况，可谓是一题多考。
在这个面试题里，涉及到 grid 的知识点其实并不多。一条 grid-template-columns 样式以及一个相对单位 fr。
笔试题解答：
用 grid-template-columns 样式把容器分成三列，左右给固定宽度，中间给 1fr 即可。
代码：
.box{
display: grid;
grid-template-columns: 200px 1fr 200px;
}
这条样式就是用来在容器中分列的样式，意思就是你要把这个容器分成多少列。
我们现在需要三个格子，所以分成三列。里面的参数可以是任意多个，那么一个参数代表的就是一列的宽度。比如，上面写的第一个参数是 200px 那么代表了这个网格中，第一列网格的宽度就是 200px 后面的以此类推；
第二个参数比较特殊：
我写了一个 1fr 这里面的这个 fr 是一个相对单位，和弹性盒模型里面的 flex 一样 意思是一份。
如果三个参数写的都是 1fr 那么这个网格会被分成三份，这时候每一列的宽度就是父级宽度的三分之一；
如果写五个 1fr 那么每一列的宽度就是父级的五分之一；
再回过头来看看之前的代码：grid-template-columns: 200px 1fr 200px；
在这里 css 首先会把父级的宽度减去 400。分别是第一列元素两百第三列元素二百，然后把剩下的宽度分成一份，给到第二列，于是乎，左右固定中间自适应的三栏就这么出来了。
遇到的一些问题：
Q：前辈 fr 是什么？
A：fr 是一个相对单位，代表一份
Q：grid 是新出来的一种布局吗
A：是的 新出来没多久，因此出现在笔试题中，应该是考验大家对新东西的关注程度
Q：兼容性怎么样？
A：因为 grid 出来没多久 所以兼容性还不太好 但是一定是以后布局的一个趋势（参考下图）
Q：这是 H5 的内容吗?
A：这是 css3 的
Q：这东东和弹性盒模型，flex 布局有什么区别？
A：不管是 grid 还是 flex 都为我们解决页面上的复杂布局提供了更多的方法 grid 号称二维布局 那么它更强大的地方也在这里，通过 grid 我们可以像填表格一样去填充页面上的内容 简单的一句话 grid 专注于页面整体的布局 flex 更偏向于决绝局部的麻烦
Q：那弹性合模型呢，以后会被它代替？
A：弹性盒模型不会被代替，但是这个比弹性盒模型功能更强大
Q：既然 grid 已经分出了三列，box 中添加三个子 div 有什么用呢？给每个 div 添加颜色他会自动识别每一列的宽度么？
A：grid 分出了三列只是画了格子并没有内容内容还是要往里面填充的呀，给每个 div 添加一个颜色只是让大家能看到效果
Q：我知道是效果的问题，但是子 div 没有给宽度，他是怎么识别的？
A：父级划分好了格子 子元素自动占满格子
Q：如果我在 Box 中写了很多 div 而只划分三列会有什么效果？
A：会自动换行
Q：自动换行的也会照上面的分成三列？
A：是的，第二行也会是三列 也就是说如果出现第四个元素，那么第四个元素也会排在第一列
Q：假如有 10 列，总不能写 10 个 1fr 吧？
A：可以用 repeat 函数
Q：repeat 函数 是 js 的？
A：不是的，是 grid 中的 repeat 函数，纯 css 的方法
Q：换行后，原来的高度不会变吧？
A：如果给子元素定义了高度 那就是定义好的高度 如果没有定义高度 那么会继承父级的高度，如果父级中没有定义行，那么多行的情况下会平分父级的高度并且如果单独定义一个子元素的高度，那么这一行的子元素高度都会受影响
Q：能不能出个 9*9 方格的例子？
A：代码送你：
.box{
height:100%;
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 200px auto 200px;
}
网友评论