[英]4x3 grid with two items double height
我正在尝试创建4x3网格,两个项目双倍高度。
.grida { width:540px; display: grid; row-gap: 14px; grid-template-columns: repeat(4, 120px); justify-content:space-evenly; align-content: space-evenly; background-color: #fff; color: #444; } .card { background-color: #ddd; color: #555; border-radius: 5px; padding: 5px; font-size: 150%; height:68px; } .a { grid-row: auto / span 2; } .g { grid-row: auto / span 2; }
<div class='grida'> <div class="card a">A</div> <div class="card b">B</div> <div class="card c">C</div> <div class="card d">D</div> <div class="card e">E</div> <div class="card f">F</div> <div class="card g">G</div> <div class="card h">H</div> <div class="card i">I</div> <div class="card j">J</div> </div>
为什么有空块?
我希望a
和g
是双倍高度。
有帮助吗?
grid-row
不起作用,因为您在card
div上设置高度。 为了调整card
div的“高度”,我使用填充做了一个技巧。 做这个:
.grida { width:540px; display: grid; row-gap: 14px; grid-template-columns: repeat(4, 120px); justify-content:space-evenly; align-content: space-evenly; background-color: #fff; color: #444; } .card { background-color: #ddd; color: #555; border-radius: 5px; font-size: 150%; padding: 30px 5px } .a, .g { grid-row: auto / span 2 !important; }
<div class='grida'> <div class="card a">A</div> <div class="card b">B</div> <div class="card c">C</div> <div class="card d">D</div> <div class="card e">E</div> <div class="card f">F</div> <div class="card g">G</div> <div class="card h">H</div> <div class="card i">I</div> <div class="card j">J</div> </div>
已经回答但是使用了grid-auto-rows:68px
可能是不那么grid-auto-rows:68px
解决方案。
.grida { width:540px; display: grid; row-gap: 14px; grid-template-columns: repeat(4, 120px); justify-content:space-evenly; align-content: space-evenly; background-color: #fff; color: #444; /*setting the height of automatically/implicitly created rows*/ grid-auto-rows:68px; } .card { background-color: #ddd; color: #555; border-radius: 5px; padding: 5px; font-size: 150%; /*height:68px;*/ } .a,.g { grid-row: auto / span 2; }
<div class='grida'> <div class="card a">A</div> <div class="card b">B</div> <div class="card c">C</div> <div class="card d">D</div> <div class="card e">E</div> <div class="card f">F</div> <div class="card g">G</div> <div class="card h">H</div> <div class="card i">I</div> <div class="card j">J</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.