I have a Grid where elements are dynamically added, in short, I want each element to occupy all available columns if these columns are not filled. For example, in this picture, I want the brown and blue elements to go all the way to the right.
I could do this manually, indicating to each element how many columns will be included, but I want to do this automatically. Some result code:
#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>
And the grid-row for each element is determined and added dynamically. Code for dynamically adding an event:
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); }
source share