是否可以計算每個網格行中的列數？行可以是動態的。
let grid = document.querySelector('.grid');
let columns = document.querySelectorAll('.column');
let button = document.querySelector('button');.grid {
display: grid;
grid-template-columns: auto auto auto;
justify-items: start;
grid-gap: 10px;
}
.grid div {
border: 1px solid #000;
width: 100%;
}
.grid > *:nth-child(3n-1):nth-last-of-type(1) {
border-color: red;
grid-column: span 2;
}
.grid > *:nth-child(3n-2):nth-last-of-type(1) {
border-color: red;
grid-column: span 3;
}
.grid > *:nth-child(3n-1) {
justify-self: center;
}
.grid > *:nth-child(3n) {
justify-self: end;
}
.result {
border: 1px solid black;
margin: 10px 0;
}
button {
margin: 40px 0;
}
p {
color: green;
}<div class="grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
<br />
Row 2
<div class="grid">
<div class="column">1</div>
<div class="column">2</div>
</div>
<br />
<div class="result">
<p>Row 1:</p>
<small>Columns:</small><br />
</div>
<div class="result">
<p>Row 2:</p>
<small>Columns:</small><br />
</div>Stackblitz：https ://stackblitz.com/edit/js-1hzwpx ? file = index.html
uj5u.com熱心網友回復：
使用querySelectorAll選擇與類的所有元素column，然后獲取節點串列的長度：
const columns = document.querySelectorAll('.grid .column').length
console.log(columns)<div class="grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>uj5u.com熱心網友回復：
這是一個解決方案，我在第一個網格標記中添加了一個 id：
Row 1
<div class="grid" id="grid-1">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
const grid1 = document.getElementById('grid-1');
// logs the number of columns in the first grid
console.log(grid1.children.length)
只需根據您的需要進行調整即可。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/361534.html
標籤：javascript css 网格 css网格