CSS 列和行的网格间隙大小不同
[英]CSS Grid gap not the same size for column and row
问题描述
I have the following elements:
我有以下元素：
<body>
<div class="parent">
<div class="grid">
<!--...-->
</div>
</div>
</body>
.parent {
margin: 30px 30px 0 30px;
display: block;
}
.grid {
display: grid;
grid-template-rows: 55% 45%;
grid-template-columns: 20% 48% 30%;
gap: 1%;
}
As you can see, the size of the cells are based on the parent element size (percentual size), and so are the gap size.如您所见，单元格的大小基于父元素大小（百分比大小），间隙大小也是如此。
The problem is that while the column gap size is just the way I want, the row gap is very thin.问题是，虽然列间隙大小正是我想要的方式，但行间隙非常薄。 I understand that this is caused because the gap is equal to 1% of the heigth of the parent element, but i wanted it to be the same size as the column gap.我知道这是因为间隙等于父元素高度的 1%，但我希望它与列间隙的大小相同。
Is there a way to make the row gap the same size as the column gap?有没有办法使行间隙与列间隙大小相同？
2 个解决方案
解决方案1
1 2020-05-20 21:47:50
First, it's better to use fr instead of percentage then you can rely on vw unit like below:首先，最好使用fr而不是百分比，然后您可以依赖vw单位，如下所示：
.parent { margin: 30px 30px 0 30px; display: block; }.grid { display: grid; border: 1px solid; grid-template-rows: 55fr 45fr; grid-template-columns: 20fr 48fr 30fr; grid-gap: calc((100vw - 60px)/100); }.grid>div { min-height: 100px; height:100%; background: red; }
<div class="parent"> <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> below to compare <div class="grid" style="grid-gap:1%;"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>
解决方案2
0 2020-05-20 21:33:51
Try using the rem unit.尝试使用 rem 单位。 For example, gap: 2rem ;例如，间隙：2rem ； This will make both row and column size equal to the root element's font size.这将使行和列的大小都等于根元素的字体大小。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.