grid网格布局，如何设置单元格的默认尺寸和空隙？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

对于grid网格布局，苏南大叔来打个比方，就像是超市的那种蛋托，并且这个蛋托里面不但可以放普通的鸡蛋，还可以放更大的鸭蛋、鹅蛋、鸵鸟蛋。另外特别的是：这个蛋托有魔法，可以无限拓展，来的任何类型的蛋都可以装下。蛋托的尺寸还是按照原有的设定，能放下更大的蛋的原因是：占了多个相邻的蛋托而已。

大家好，这里是苏南大叔的程序如此灵动博客，记录苏南大叔的代码所学所想。本文测试环境：win10，chrome。本文主要解决没有columns或者rows的模版信息的时候，单元格的默认尺寸设置的问题。

通常定义template-columns和template-rows

正常情况下来说，是通过grid-template-columns和grid-template-rows来定义每个网格的尺寸信息的。参考链接：

• https://newsn.net/say/grid-template.html

测试代码：

<div class="box">
  <div class="item">苏</div>
  <div class="item">南</div>
  <div class="item">大</div>
  <div class="item">叔</div>
</div>
<style>
  .box {
    display: grid;
    grid-template: 1fr 1fr/1fr 1fr;
    grid-gap:3px;
    width: 200px;
    height: 100px;
    background: rgb(255, 255, 255);
  }
  .item {
    background: red;
    display: block;
    text-align: center;
    font-size: 22px;
    color: white;
  }
  .item:nth-child(odd) {
    background-color: blue;
  }
</style>

例子里面使用了grid-template来表示grid-template-rows和grid-template-columns。

这里的例子还存在着一个问题，就是定义单元格的个数有限。而在实际的场景下，子元素的个数是不受限的，所需要的网格数量也是很多的，所以需要下面新的属性grid-auto-columns/grid-auto-rows。

默认尺寸：grid-auto-columns/grid-auto-rows

grid-template-columns和grid-template-rows用于定义已知的格子，这两个属性grid-auto-columns、grid-auto-rows就是用于定义未知的格子尺寸，即格子尺寸的默认值。

这里仅仅是个建议型的默认值，不一定生效。毕竟grid的各种属性相互作用的比较厉害。

测试代码如下：

<div class="box">
  <div class="item">苏</div>
  <div class="item">南</div>
  <div class="item">大</div>
  <div class="item">叔</div>
  <div class="item">写</div>
  <div class="item">博</div>
  <div class="item">客</div>
</div>
<style>
  .box {
    display: grid;
    grid-template: 1fr 1fr/1fr 2fr;
    grid-gap: 3px 6px;
    width: 300px;
    height: 180px;
    background: rgb(255, 255, 255);
    grid-auto-rows: 36px;
    grid-auto-columns: 50px;  /* 有template时失效 */
  }
  .item {
    background: red;
    display: block;
    text-align: center;
    font-size: 18px;
    color: white;
  }
  .item:nth-child(odd) {
    background-color: blue;
  }
</style>

空隙：grid-gap/row-gap/column-gap

这个就非常好理解了，就是设置网格之间的间隙。但是，这个属性gap属性貌似可能是个废弃状态。但是，浏览器依然能够正常识别显示。所以，就暂时认为它还是有效的吧。

这些属性存在着多个别名。比如：

`grid-gap` = `gap` = `row-gap` `column-gap`

`grid-row-gap` = `row-gap`

`grid-column-gap` = `column-gap`

gap这个词，让我想起了gap year。

相关链接

• https://newsn.net/say/css-grid.html
• https://newsn.net/say/grid-auto-flow.html
• https://newsn.net/say/grid-auto-flow-dense.html
• https://newsn.net/say/grid-template.html
• https://newsn.net/say/grid-template-areas.html
• https://newsn.net/say/grid-minmax.html

总结

更多来自苏南大叔的css精彩文章，请点击下面的链接：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。