Html中Grid布局的边框解法

众所周知，grid布局目前得到浏览器的支持已经非常可观了，它强大的功能已经成为很多复杂布局的首选。

同时，很多场景里，它也成为了 table 布局的优秀替代方案。

但是很多人在使用grid代替table布局时，却发现了一个严重的问题，那就是：

边框非常不方便！

如图，一般情况下，我们都只能给item设置border，但渲染出来的效果嘛……

效果极其难受，因为每个item都拥有本身的border，这样一来有的地方2px，有的地方1px。

那么应该怎么做呢？

其实很简单，两行css，如下

这样一来，效果就完美了。

grid布局是继flex布局之后最强大的布局方案，一定程度上集合了flex和table布局的优点。

grid将网页划分成网格，可以任意组合设置，并提供内置函数，变化出各种各样的布局。浏览器内置了各种复杂的布局方案，不需要像之前float，column，table那样繁琐，可以直接在CSS当中灵活设置。

grid可以看作是一种类似table的二维布局，有行和列，行列可以任意设置以适应实际布局需要。

grid默认为块级元素，设置为inline-grid则为行内元素。

需求 ：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应

将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况

正常的渲染效果如下所示：

第二种：绝对定位（position:absolute）

设置父盒子position:relative（相对定位），

三个子盒子position：absolute,

左盒子left:0,

右盒子right:0

中间盒子left:300pxright:300px

第三种：flex布局

父盒子 display:flex

左右盒子设置宽度：300px

中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩

第四种：grid布局

父盒子display: grid

grid-template-columns:300px auto 300px(分割成3列，宽度分别为300px auto 300px)

grid-template-rows:100px(占一行，行高100px)

---