虽然我还没有找到答案，但问题很简单：有没有办法， 除了蛮力之外， 计算响应式网格中的列数？
#grid-container {
width: 100%;
height: 85%;
position: relative;
padding: var(--gap); /* adjusted with JS to make var(--gap) responsive */
display: grid;
grid-gap: var(--gap); /* adjusted with JS to make var(--gap) responsive */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
box-sizing: border-box;
background: skyblue;
}
.grid-item {
width: 100%;
min-width: 120px;
max-width: 450px;
height: ; /* adjusted with JS on resize events to roughly maintain proportions */
min-height: 192px;
border-radius: 10px;
background: #333;
}
我问的原因是因为我已经给了网格项目max-width这会在最后一个断点处造成巨大的差距，我希望能够检测到这一点，而不是设置显式的媒体查询。
获取 css 网格的行数/列数的一种方法是使用grid-template-rows or grid-template-columns根据网格的计算样式window.getComputedStyle(grid).
返回值始终是转换为分离的像素值 https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value（例如 20px 20px 50px），其中每个值代表相应列/行的大小。剩下要做的就是将字符串拆分为数组并计算值的数量。
const gridComputedStyle = window.getComputedStyle(grid);
// get number of grid rows
const gridRowCount = gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").length;
// get number of grid columns
const gridColumnCount = gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").length;
console.log(gridRowCount, gridColumnCount);
这是完整的片段（Codepen https://codepen.io/Robbendebiene/pen/pooyOyd):
function getGridData () {
// calc computed style
const gridComputedStyle = window.getComputedStyle(grid);
return {
// get number of grid rows
gridRowCount: gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").length,
// get number of grid columns
gridColumnCount: gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").length,
// get grid row sizes
gridRowSizes: gridComputedStyle.getPropertyValue("grid-template-rows").split(" ").map(parseFloat),
// get grid column sizes
gridColumnSizes: gridComputedStyle.getPropertyValue("grid-template-columns").split(" ").map(parseFloat)
}
}
window.addEventListener("DOMContentLoaded", outputGridData);
window.addEventListener("resize", outputGridData);
function outputGridData () {
const gridData = getGridData();
output.textContent = `
Rows: ${gridData.gridRowCount}
Columns: ${gridData.gridColumnCount}
Rows sizes: ${gridData.gridRowSizes}
Column sizes: ${gridData.gridColumnSizes}
`;
}
#grid {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, 200px);
}
#output {
white-space: pre-wrap;
}
.A, .B, .C {
font-family: Arial;
font-weight: 600;
font-size: 2rem;
border-radius: 50% 50%;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
box-shadow: -3px 5px 20px -3px #AAA;
border: solid 10px #fff;
color: #fff;
}
.A {
background: #ffc300;
}
.B {
background: #c70039;
}
.C {
background: #581845;
}
<div id="output"></div>
<div id="grid">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
