如何调整网格中单元格的高度？

huangapple
go评论108阅读模式
英文:

How can I adjust the height of the cells in a grid?

问题

我使用了 box-shadow 来为按钮增加一些深度，如下所示，但它穿过间隙，导致间距不均匀。

如何调整网格中单元格的高度？

最初，我尝试更改 grid-template-rows 以解决此问题：

  1. grid-template-rows: calc(1fr - 10px) calc(1fr - 10px);

但似乎没有起作用。

最小代码示例：

  1. <div class="cont">
  2.   <div></div>
  3.   <div></div>
  4.   <div></div>
  5.   <div></div>
  6. </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:

  1. 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 -->

  1. .cont {
  2.     display: grid;
  3.     padding: 20px;
  4.     grid-template-columns: 1fr 1fr;
  5.     grid-template-rows: 1fr 1fr;
  6.     grid-gap: 20px;
  7.     width: 250px;
  8.     height: 250px;
  9.     background: black;
  10. }
  12. .cont&gt;div {
  13.     background: rgb(206, 34, 34);
  14.     box-shadow: 0 10px 0 rgb(160, 25, 25);
  15. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;cont&quot;&gt;
  2.   &lt;div&gt;&lt;/div&gt;
  3.   &lt;div&gt;&lt;/div&gt;
  4.   &lt;div&gt;&lt;/div&gt;
  5.   &lt;div&gt;&lt;/div&gt;
  6. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

你可以分别设置行间距和列间距：

  1. .cont {
  2.     display: grid;
  3.     padding: 20px 20px 30px 20px;
  4.     grid-template-columns: 1fr 1fr;
  5.     grid-template-rows: 1fr 1fr;
  6.     row-gap: 30px;
  7.     column-gap: 20px;
  8.     width: 250px;
  9.     height: 250px;
  10.     background: black;
  11. }
  13. .cont>div {
  14.     background: rgb(206, 34, 34);
  15.     box-shadow: 0 10px 0 rgb(160, 25, 25);
  16. }
  1. <div class="cont">
  2.   <div></div>
  3.   <div></div>
  4.   <div></div>
  5.   <div></div>
  6. </div>
英文:

You could set the row gap and column gap separately:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

  1. .cont {
  2.     display: grid;
  3.     padding: 20px 20px 30px 20px;
  4.     grid-template-columns: 1fr 1fr;
  5.     grid-template-rows: 1fr 1fr;
  6.     row-gap: 30px;
  7.     column-gap: 20px;
  8.     width: 250px;
  9.     height: 250px;
  10.     background: black;
  11. }
  13. .cont&gt;div {
  14.     background: rgb(206, 34, 34);
  15.     box-shadow: 0 10px 0 rgb(160, 25, 25);
  16. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;cont&quot;&gt;
  2.   &lt;div&gt;&lt;/div&gt;
  3.   &lt;div&gt;&lt;/div&gt;
  4.   &lt;div&gt;&lt;/div&gt;
  5.   &lt;div&gt;&lt;/div&gt;
  6. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

使用内阴影：

  1. .cont {
  2.     box-shadow: 0 -10px 0 rgb(160, 25, 25) inset;
  3. }
英文:

Use an inset shadow:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .cont {
  2.     display: grid;
  3.     padding: 20px;
  4.     grid-template-columns: 1fr 1fr;
  5.     grid-template-rows: 1fr 1fr;
  6.     grid-gap: 20px;
  7.     width: 250px;
  8.     height: 250px;
  9.     background: black;
  10. }
  12. .cont &gt; div {
  13.     background: rgb(206, 34, 34);
  14.     box-shadow: 0 -10px 0 rgb(160, 25, 25) inset;
  15. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;cont&quot;&gt;
  2.   &lt;div&gt;&lt;/div&gt;
  3.   &lt;div&gt;&lt;/div&gt;
  4.   &lt;div&gt;&lt;/div&gt;
  5.   &lt;div&gt;&lt;/div&gt;
  6. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月21日 08:42:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76297857.html
  • css
  • css-grid
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定