使柵格項目跨越所有可用的列

我有一個網格，其中項目是動態添加的，簡而言之，如果這些列未填充，我希望每個項目都佔用所有可用的列。例如，在這張圖片中，我想讓棕色和青色元素一路走向右側。

我可以手動通過告訴每個項目有多少列來跨越，但我想自動做到這一點。一些結果代碼：使柵格項目跨越所有可用的列

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

來源

2017-07-30 Mohamed Oun

@YahyaHussein他們與JS加，用簡單的DOM操作，無論如何，我會添加代碼。什麼會增加一個班級呢？ –

爲了使這項工作，容器必須知道：

電網項目的位置，並
是否有相鄰列中的行上的空單元格

然後，它可以確定需要跨越多少個附加列。

據我所知，CSS Grid Specification不提供這樣的功能。

它可以手動完成，因爲你已經注意到：

我可以告訴每個項目多少列跨越做手工，但我想自動執行。

它看起來像你需要一個腳本，使其自動發生。

的更多信息：

來源

2017-07-30 18:48:18

使柵格項目跨越所有可用的列

回答

相關問題