CSSグリッド。各グリッド間の異なるギャップ

Question

各グリッド要素間に異なるギャップを適用しようとしています。たとえば、次のコードがあります。 4つのグリッド線、3つの要素、各グリッドボックス間の10ピクセル幅。各グリッドボックス間にカスタム幅を適用するにはどうすればよいですか？たとえば、element1とelement2の間に20px、次にelement2とelement3の間に30px？

私はCSSのグリッドでそれを達成できますか？

編集：パディングなし。 Edit2：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で使いたい一般的なアプローチは余分の列を作ることです。明らかに、同じパディングがある場合はgrid-column-gapとgrid-row-gapを使用しますが、そうでない場合はトークン列を追加できます。

なぜパディング/マージンはありませんか？

これには完全にパディング/マージンを使うことができますが、CSSのグリッドではラッパーのレイアウトを定義するため、余分な列が少し好きです。また、これらの列のすべての項目に適用する必要はありません。 （また、あなたはそれを左右どちらかの項目に適用しますか？または両方の項目に適用しますか？）

しかし、これは

をナンバリング私を台無しにあなたはは、CSSグリッド内の領域を記述するための番号を使用することはありません、なぜはい、それはです！

あなたのラインとそのエリアをあなたのエリアに付けることができます。これを使って！

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

ああ、あなたは余分なパディングをしたい：あなたは、単にこのようにそれを名前を付け、この鉱石のためgrid-template-areasを使用することができますか？ここに行く：私は何もでていない

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/