英文:
How can I adjust the height of the cells in a grid?
问题
我使用了 box-shadow 来为按钮增加一些深度，如下所示，但它穿过间隙，导致间距不均匀。
最初，我尝试更改 grid-template-rows 以解决此问题：
grid-template-rows: calc(1fr - 10px) calc(1fr - 10px);
但似乎没有起作用。
最小代码示例：
<div class="cont">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
英文:
I used a box-shadow to add some depth to the buttons as you can see below, however it 'bleeds' through the gap, and makes the spacing uneven.
Initially, I tried to change the grid-template-rows to account for this:
grid-template-rows: calc(1fr - 10px) calc(1fr - 10px);
but it didn't seem to do anything.
Minimum code example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.cont {
display: grid;
padding: 20px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
width: 250px;
height: 250px;
background: black;
}
.cont>div {
background: rgb(206, 34, 34);
box-shadow: 0 10px 0 rgb(160, 25, 25);
}
<!-- language: lang-html -->
<div class="cont">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- end snippet -->
答案1
得分: 1
你可以分别设置行间距和列间距：
.cont {
display: grid;
padding: 20px 20px 30px 20px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 30px;
column-gap: 20px;
width: 250px;
height: 250px;
background: black;
}
.cont>div {
background: rgb(206, 34, 34);
box-shadow: 0 10px 0 rgb(160, 25, 25);
}
<div class="cont">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
英文:
You could set the row gap and column gap separately:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
.cont {
display: grid;
padding: 20px 20px 30px 20px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 30px;
column-gap: 20px;
width: 250px;
height: 250px;
background: black;
}
.cont>div {
background: rgb(206, 34, 34);
box-shadow: 0 10px 0 rgb(160, 25, 25);
}
<!-- language: lang-html -->
<div class="cont">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- end snippet -->
答案2
得分: 1
使用内阴影：
.cont {
box-shadow: 0 -10px 0 rgb(160, 25, 25) inset;
}
英文:
Use an inset shadow:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.cont {
display: grid;
padding: 20px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
width: 250px;
height: 250px;
background: black;
}
.cont > div {
background: rgb(206, 34, 34);
box-shadow: 0 -10px 0 rgb(160, 25, 25) inset;
}
<!-- language: lang-html -->
<div class="cont">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论