5
Tôi có một Lưới nơi các mục được tự động thêm vào, trong ngắn hạn, tôi muốn mỗi mục chiếm tất cả các cột có sẵn nếu các cột này không được lấp đầy. Ví dụ, trong bức ảnh này, tôi muốn các phần tử màu nâu và lục lam đi qua bên phải. 
Tôi có thể làm điều đó theo cách thủ công bằng cách cho mỗi mục biết có bao nhiêu cột, nhưng tôi muốn tự động làm điều đó. Một số mã kết quả:Làm cho một mục lưới bao trùm tất cả các cột có sẵn
#wrapper {
background-color: white;
width: 96px;
height: 100%;
margin: 0 auto;
}
.half-hours {
height: 20px;
background-color: white;
border-top: 1px solid rgba(24.7%, 31.8%, 71%, 0.7);
}
#timeline_wrapper {
position: absolute;
margin: 0 auto;
margin-left: -24px;
width: 120px;
height: 100%;
}
#timeline {
float: right;
height: 100%;
width: 96px;
position: relative;
}
#events {
margin: 0 auto;
height: 50%;
width: 85px;
position: relative;
display: grid;
grid-template-rows: repeat(30, 20px);
grid-gap: 1px;
grid-template-columns: repeat(3, auto);
}
.event {
width: 100%;
height: 100%;
border-radius: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}<div id="wrapper">
<div id="timeline_wrapper">
<div id="timeline">
<div class="9 half-hours"></div>
<div class="9.5 half-hours"></div>
<div class="10 half-hours"></div>
<div class="10.5 half-hours"></div>
<div class="11 half-hours"></div>
<div class="11.5 half-hours"></div>
<div class="12 half-hours"></div>
<div class="12.5 half-hours"></div>
<div class="13 half-hours"></div>
<div class="13.5 half-hours"></div>
<div class="14 half-hours"></div>
<div class="14.5 half-hours"></div>
<div class="15 half-hours"></div>
<div class="15.5 half-hours"></div>
<div class="16 half-hours"></div>
<div class="16.5 half-hours"></div>
<div class="17 half-hours"></div>
<div class="17.5 half-hours"></div>
<div class="18 half-hours"></div>
<div class="18.5 half-hours"></div>
<div class="19 half-hours"></div>
<div class="19.5 half-hours"></div>
<div class="20 half-hours"></div>
<div class="20.5 half-hours"></div>
<div class="21 half-hours"></div>
<div class="21.5 half-hours"></div>
<div class="22 half-hours"></div>
<div class="22.5 half-hours"></div>
<div class="23 half-hours"></div>
<div class="23.5 half-hours"></div>
<div class="24 half-hours"></div>
</div>
</div>
<div id="events">
<div class="event" style="grid-row: 1/14; background-color: red;"></div>
<div class="event" style="grid-row: 1/12; background-color: green;"></div>
<div class="event" style="grid-row: 2/6; background-color: blue;"></div>
<div class="event" style="grid-row: 6/7; background-color: orange;"></div>
<div class="event" style="grid-row: 12/14; background-color: brown;"></div>
<div class="event" style="grid-row: 14/16; background-color: yellow;"></div>
<div class="event" style="grid-row: 14/15; background-color: cyan;"></div>
</div>
</div>Và grid-row cho từng hạng mục được xác định và bổ sung năng động. Mã này để thêm sự kiện tự động:
addEventToDOM(event) {
var wrapper = document.querySelector('#events');
var eventDiv = document.createElement('div');
var gridRowStart = (event.start - 9) * 2 + 1;
var gridRowEnd = (event.end - 9) * 2 + 1;
var color = availableColors.values().next().value;
eventDiv.className = 'event';
eventDiv.setAttribute('style', `grid-row: ${gridRowStart}/${gridRowEnd}; background-color: ${color};`);
availableColors.delete(color);
wrapper.appendChild(eventDiv);
}
@YahyaHussein họ đang bổ sung với JS, với thao tác DOM đơn giản, tôi sẽ thêm mã anyway. Điều gì sẽ thêm một lớp làm gì? –