grid布局实现打印中页边距预览器

前言

        终于遇到一个需要用grid布局能分方便开发的场景了，就是实现一个打印预览时，设置纸张页边距的功能，效果图如下：

 功能说明如下：

        有3X3=9个格子，中间的格子来模拟纸张。以设置上边距为例，上边距的数值增加，第一行的三个格子高会增加，第二行的格子的高会减少。

实现

        如果不用grid，而用flex实现起来还是挺麻烦的。用grid就只用js取修改grid的grid-template-rows和grid-template-columns两个属性就可以了。

<style>
._print_grid_container {
    display: grid;
    grid-template-columns: 19px 112px 19px;
    grid-template-rows: 25px 150px 25px;
    width: 150px;
    height: 200px;
    border: 1px solid #7979FF;
}
._print_grid_item {
  border: 1px solid #7979FF;
}
</style>
<div class="_print_grid_container" id="printGridContainer">
	<div class="_print_grid_item"></div>
	<div class="_print_grid_item"></div>
	<div class="_print_grid_item"></div>
    <div class="_print_grid_item"></div>
    <div class="_print_grid_item">纸张</div>
    <div class="_print_grid_item"></div>
    <div class="_print_grid_item"></div>
    <div class="_print_grid_item"></div>
    <div class="_print_grid_item"></div>
</div>

最后

        grid还是很好用的，最后附上看完阮一峰的grid教程的笔记：
。。。后补