为什么grid-gap会导致溢出？
您有一个3列网格容器(.body):
grid-template-columns: 25% 50% 25%
这些列的总宽度为100%。
然后在列（和行）之间添加沟槽：
grid-gap: 10px
即：
grid-column-gap: 10px; grid-row-gap: 10px;
所以当你把所有的宽度加起来时：
25% + 50% + 25% + 10px + 10px
简单地说：
100% + 20px > 100%, 这会导致溢出情况
（注意:grid-*-gap属性仅应用于网格项之间-绝不应用于项与容器之间。这就是为什么我们计算两个网格间隙，而不是四个。）
作为一种解决方案，可以尝试使用fr单位，而不是百分比单位，它只适用于可用空间。这意味着fr长度是在应用任何grid-gap长度之后计算的。
grid-template-columns: 1fr 2fr 1fr
相关内容
-
浅谈CSS3 Grid网格布局（display: grid）的用法
【推荐教程：CSS视频教程】我们一起来学习一下CSS的Grid布局是如何使用的通过这篇文章以后等我们自己做UI库的时候就会多了一种做法。我们来使用CSSGrid创建一个超酷的图...
-
css3给背景图层加颜色遮罩的方法
（学习视频分享：css视频教程）在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<divcla...
-
使用CSS实现的几种进度条
（学习视频分享：css视频教程）进度条是一个非常常见的功能，实现起来也不难，一般我们都会用div来实现。作为一个这么常见的需求，whatwg肯定是不会没有原生组件提供（虽然有我...
-
CSS3实现文字折纸效果的方法（代码示例）
本篇文章给大家通过示例介绍一下使用CSS3来实现文字折纸效果的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下，希望对大家有所帮助。CSS3文字折纸代码如下，...
-
css3字体可以模糊吗
css3字体的可以模糊的；开发者可以使用CSS3中的filter属性来实现字体模糊效果，filter语法是“filter:blur(px);”，其filter属性定义了元素的可...
-
vs2010 如何支持css3
vs2010支持css3的方法：首先下载CSS3IntellisenseSchema并安装；然后用“Win+R”输入“regedit”打开注册表；接着将css30.xml拷贝到...
-
聊聊你可能不了解的CSS属性函数 attr()
本篇文章带大家了解一下CSS属性函数attr()。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。属性函数attr()用于获取HTML元素里面的属性值,并用于样...
-
浅谈css3 device-width和width之间的差异
本篇文章和大家谈谈css媒体查询中device-width与width的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【推荐教程：CSS视频教程】1.d...
-
css3怎么设置元素背面不可见
在css3中，可以利用backface-visibility属性，通过给元素添加“backface-visibility:hidden;”样式来设置背面不可见。backface...
-
详细了解CSS3中的border-image-slice属性
【推荐教程：CSS视频教程】首先我们来了解一下它是干嘛的。说明：文档说明：它是控制图像边界向内偏移的。what？？？这是嘛意思啊？根本看不懂！！！好的，我们先不要急，我们在看看...
