我有一个 CSS 网格布局 (8 x 4)。 预览: 1 : /image/r3XAy.jpg
我有 8 列和 4 行。列响应式(全宽),单位为 1fr
。
但是我无法获得与行相同的行为(需要 4 行全高)。我怎样才能得到它?
我的代码:
HTML:
<div class="grid">
<div id="item-1" class="item item-1">
<span>1</span>
</div>
<div id="item-2" class="item item-2">
<span>2</span>
</div>
... <!-- until 29 -->
</div>
// Close grid
CSS:
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr) minmax(200px, 1fr);
overflow: hidden;
grid-template-rows: repeat(4, 1fr);
grid-gap: 15px;
}
.item {
border-radius: 3px;
text-align: center;
color: white;
height: 140px; // <-- need 4 rows, but full height. How to do it?
}
.progress-bar {
grid-row: 1 / -1;
grid-column: -2 / -1;
}
最佳答案
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr) minmax(200px, 1fr);
/* overflow: hidden; */
grid-template-rows: repeat(4, 1fr);
grid-gap: 15px;
height: 100vh; /* height must be defined; see link reference below */
}
.item {
border-radius: 3px;
text-align: center;
color: white;
/* height: 140px; */
}
.progress-bar {
grid-row: 1 / -1;
grid-column: -2 / -1;
}
body { margin: 0; } /* remove default margins */
关于html - css 网格布局静态响应列和行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48608552/