5
アイテムが動的に追加されるグリッドがあります。要するに、これらのカラムが充填されていない場合は、すべてのカラムを使用します。 たとえば、この図では、茶色とシアンの要素を右端に移動します。
各項目にスパンする列の数を指定して手動で行うこともできますが、自動的に実行したいと思います。 一部の結果コード：各項目のグリッドアイテムを使用可能なすべてのカラムにまたがるようにする
#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>そしてgrid-rowが決定され、動的に追加されます。 動的にイベントを追加するコード：
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);
}
彼らはJSを追加している@YahyaHussein、簡単なDOM操作で、私はとにかくコードを追加します。クラスを追加すると何ができますか？ –