CSSの全幅グリッド - 偶数マージンの列

Question

デスクトップ版で画面の幅全体を塗りつぶす4列の応答グリッドを作成しようとしていますが、余白を追加すると間違いなくその間に表示されます最後の列が画面の残りの幅を埋めるのではなく、列の幅に応じて新しい行にドロップされることを示します。

CSS：

#servicesGrid 
{ 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 
} 

.service 
{ 
width:24.75%; 
height:45%; 
background:#262626; 
display:block; 
float:left; 
margin:1px; 
} 

#servicesGrid .service:nth-of-type(1) 
{ 
width:100%; 
} 

#servicesGrid .service:nth-of-type(2) 
{ 
margin-left:0; 
} 

#servicesGrid .service:nth-of-type(5) 
{ 
margin-right:0; 
} 

HTML：JSFiddle上

<div id="servicesGrid"> 

    <div class="service"></div> 

    <div class="service"></div> 

    <div class="service"></div> 

    <div class="service"></div> 

    <div class="service"></div> 

</div> 

例：https://jsfiddle.net/4bw4p3LL/。

Answer 1

widthに%を使用している場合は、余白にも%を使用することをおすすめします。したがって、最大で100%を追加することになります。

アイデアはどこので4*colwidth + 3*margins = 100%

は、最後の1（nth-of-type(5)）を除くすべての.col要素にmargin-right:0.5%を使用して、あなたは100% - 3*0.5% = 98.5%/4 = 24.625%

の幅を持っているということです：100%は幅でありますservicesGrid,3は、最初の3列に与えられた0.5%の余白の数であり、98.5%は、4列が占める残りの領域であり、それをnrの列で割ると、すべての列の幅が与えられます。

0123あなたは、あなたがあなたの幅（マージンが設定されている方法は、固定1pxのマージンとしたい仕事をカルクはずなので

#servicesGrid 
 
{ 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 

 
.service 
 
{ 
 
\t width:24.625%; 
 
\t height:45%; 
 
\t background:#262626; 
 
\t display:block; 
 
\t float:left; 
 
\t margin:1px 0.5% 1px 0; 
 
} 
 

 
#servicesGrid .service:nth-of-type(5) 
 
{ 
 
\t margin-right:0; 
 
}

<div id="servicesGrid"> 
 
\t \t \t 
 
\t \t \t \t <div id="serviceWide" class="service col" style="width:100%; margin:0 0 1px 0"> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="service col"></div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="service col"></div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="service col"></div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="service col"></div> 
 
\t \t \t \t 
 
\t \t \t </div>

Answer 2

widthにはcalcを使用できます。これにより、widthから減算する値（margin）を指定することができます。すべての最新のブラウザであるbrowser supportにご注意ください。

jsfiddle

.service {  
    width: calc(24.75% - 1px); 
    height: 45%; 
    background: #262626; 
    display: block; 
    float: left; 
    margin: 1px; 
} 

Answer 3

1つのオプションは、あなたがwidthの内側の境界線を含めることbox-sizingを使用することができ、偽の要素の間にスペースをborderを使用しています。このコードを試してみてください。

#servicesGrid { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.service { 
 
    width: 25%; 
 
    height: 45%; 
 
    background: #262626; 
 
    display: block; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 
.service:nth-child(n+3) { 
 
    border-left: 1px solid white; 
 
}

<div id="servicesGrid"> 
 
    <div id="serviceWide" class="service col" style="width:100%; margin:0 0 1px 0"></div> 
 
    <div class="service col"></div> 
 
    <div class="service col"></div> 
 
    <div class="service col"></div> 
 
    <div class="service col"></div> 
 
</div>

---

番目のオプション

あなたはこのコードを試し、その後、Flexboxを使用することができた場合：

#servicesGrid { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
    align-content:flex-start; 
 
    align-items:justyfy-content; 
 
    justify-content: space-between; 
 
} 
 
#serviceWide { 
 
    flex:0 1 100%; 
 
    margin-bottom:1px; 
 
} 
 
.service { 
 
    width: 24.8%; 
 
    height: 45%; 
 
    background: #262626; 
 
}

<div id="servicesGrid"> 
 
    <div id="serviceWide" class="service col"></div> 
 
    <div class="service col"></div> 
 
    <div class="service col"></div> 
 
    <div class="service col"></div> 
 
    <div class="service col"></div> 
 
</div>

Answer 4

#servicesGrid 
 
{ 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 

 
.service 
 
{ 
 
\t width:calc(24.75% - 1px); 
 
\t height:45%; 
 
\t background:#262626; 
 
\t display:block; 
 
\t float:left; 
 
\t margin:1px; 
 
} 
 

 
#servicesGrid .service:nth-of-type(2) 
 
{ 
 
\t margin-left:0; 
 
} 
 

 
#servicesGrid .service:nth-of-type(5) 
 
{ 
 
\t margin-right:0; 
 
}

<div id="servicesGrid"> 
 
    <div id="serviceWide" class="service col" style="width:100%; margin:0 0 1px 0"></div> 
 
<div class="service col"></div> 
 
<div class="service col"></div> 
 
<div class="service col"></div> 
 
<div class="service col"></div> 
 
</div>

Answer 5

は、それはへのあなたのための非常に難しいです小さな例外なく動的な幅を設定する - <table>を使用しない場合）

このようにして、あなたの列にwidth: calc(25% - Ypx)を使用してください。ブラウザ全体でサポートされています（http://caniuse.com/#search=calc）。これは、次のように使いこなしました。

.service 
{ 
    width:calc(25% - 2px); 
    height:45%; 
    background:#262626; 
    display:block; 
    float:left; 
    margin: 1px; 
} 

#servicesGrid .service:nth-of-type(2) 
{ 
    margin-left:0; 
    width:calc(25% - 1px); 
} 

#servicesGrid .service:nth-of-type(5) 
{ 
    margin-right:0; 
    width:calc(25% - 1px); 
}