Utwórz element siatki obejmujący wszystkie dostępne kolumny

Question

Mam tabelę, w której elementy są dodawane dynamicznie, krótko mówiąc, chcę, aby każdy element obejmował wszystkie dostępne kolumny, jeśli te kolumny nie są wypełnione. Na przykład na tym obrazku chcę, aby brązowe i cyjanowe elementy przesunęły się w prawo.
Mogłabym zrobić to ręcznie, informując każdy przedmiot o liczbie kolumn, ale chcę to zrobić automatycznie. Niektóre kod wynik:

#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>

I grid-row dla każdej pozycji jest określona i dodaje się dynamicznie. Kod dodać zdarzenie dynamicznie:

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); 
} 

Answer 1

W celu dokonania tej pracy, pojemnik musi wiedzieć:

1. położenie elementu sieci, a
2. , czy nie istnieją puste komórki w rzędzie w sąsiedniej kolumnie (kolumnach)

Może wtedy określić, ile dodatkowych kolumn ma być łączonych.

O ile mogę powiedzieć, CSS Grid Specification nie zapewnia takiej funkcjonalności.

Można to zrobić ręcznie, jak pan zauważył:

mogę to zrobić ręcznie przez mówienie każdą pozycję, ile kolumn rozpiętości, ale chcę to zrobić automatycznie.

Wygląda na to, że będziesz potrzebował skryptu, aby to się stało automatycznie.

Więcej informacji:

• Make a row stretch across all columns in CSS Grid
• make css grid item span from first to last row