CSS網格。每個網格之間不同的差距

Question

我想要應用每個網格元素之間不同的差距，例如我們有以下代碼。 4個網格線，3個元素和每個網格框之間10px的寬度。我如何在每個網格框之間應用自定義寬度？例如元素1和元素2之間爲20px，然後元素2和元素3之間爲30px？

我可以實現與CSS網格？

編輯：沒有使用填充。 編輯2：提供Pictre。

Click for picture preview

html, body {height: 100%; margin: 0; padding: 0;} 
 
body { 
 
display: grid; 
 
grid-template-columns: 1fr 1fr 1fr 1fr; 
 
grid-template-row: 1fr 1fr; 
 
grid-column-gap: 10px; 
 
grid-row-gap: 10px; 
 
    
 
} 
 
#element1 { 
 
grid-column: 1/2; 
 
grid-row: 1/2; 
 
border: 1px solid #2e2e2e; 
 
color: #000; 
 
} 
 

 
#element2 { 
 
grid-column: 2/3; 
 
grid-row: 1/2; 
 
border: 1px solid #2e2e2e; 
 
color: #000; 
 
} 
 

 
#element3 { 
 
grid-column: 3/4; 
 
grid-row: 1/2; 
 
border: 1px solid #2e2e2e; 
 
color: #000; 
 
}

<div id="element1">element1</div> 
 
<div id="element2">element2</div> 
 
<div id="element3">element3</div>

Answer 1

那麼我喜歡使用CSS網格的一般方法是增加額外的列。如果你有相同的填充，顯然使用grid-column-gap和grid-row-gap，但如果沒有，你可以添加令牌列。

爲什麼不填充/保證金？

你可以完全使用padding/margin來達到這個目的，但是我更喜歡額外的列，因爲在css-grid中你在包裝器中定義了佈局，這就是它屬於語義的地方。您也不必將其應用到這些列中的每個項目。 （另外，你是將它應用於左邊還是右邊還是兩邊？）。

但這打亂了我的編號

是的，這就是爲什麼你從來沒有使用數字在CSS網格來描述一個區域！

您可以爲您的線條命名並使用您的區域。用這個！您可以使用grid-template-areas這個礦只是它命名爲這樣的：

grid-template-columns: [left-start] auto [left-end right-start] auto [right-end]; 

哦，你想微胖？在這裏你去：

grid-template-columns: [left-start] auto [left-end] 10px [right-start] auto [right-end]; 

---

請注意，我絕不是一個經驗豐富的Web開發人員（正好相反），但我認爲這種方法可能 - 一般 - 是最好的一個。

Answer 2

我沒有看到具體的Grid任何事情你的情況，但你可以很容易地實現通過添加填充期望的結果。

HTML

<div id="grid"> 
    <div id="element1"> 
    <div class="content">element1</div> 
    </div> 
    <div id="element2"> 
    <div class="content">element2</div> 
    </div> 
    <div id="element3"> 
    <div class="content">element3</div> 
    </div> 
</div> 

CSS

#element1 { 
    padding-right: 5px; 
} 

#element2 { 
    padding-left: 5px; 
    padding-right: 10px; 
} 

#element3 { 
    padding-left: 10px; 
} 

.content { 
    height: 100%; 
    border: 1px solid #2e2e2e; 
} 

---

的jsfiddle例如：
https://jsfiddle.net/wkt39kk8/