グリッドのブロックの幅計算

Question

ブロックのグリッドを設定しようとしていますが、コンテナの幅の100％を埋めるようにブロックを作っているように見えます。彼らは正しく整列していないようです。

最初の行には1つの大きなブロックと3つの小さいブロックが必要です。 2番目のブロックは、最初の大きなブロック（1つの小さいブロックと1つの大きなブロック）の残りの部分でいっぱいになるはずです。

ブロックの合計幅がコンテナの幅よりも大きいように見えて、2番目の行に移動してレイアウトを台無しにしているようです。

私の要素の1つにいくつかのプロパティがありませんか？

.content { 
 
    width: 100%; 
 
    margin-top: -5px; 
 
    margin-right: -5px; 
 
    position: relative; 
 
    height: 100%; 
 
} 
 

 
.grid { 
 
    width: 100%; 
 
} 
 

 
.block { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 5px; 
 
    width: calc(20% - 10px); 
 
    padding-bottom: calc(20% - 10px); 
 
    vertical-align: top; 
 
} 
 

 
.block:nth-child(14), 
 
.block:nth-child(18), 
 
.block:nth-child(19), 
 
.block:nth-child(20), 
 
.block:nth-child(5), 
 
.block:nth-child(6), 
 
.block:nth-child(7), 
 
.block:nth-child(8), 
 
.block:nth-child(9) { 
 
    margin-top: calc(-20% + 5px) 
 
} 
 

 
.block:nth-child(1), 
 
.block:nth-child(11), 
 
.block:nth-child(20), 
 
.block:nth-child(6) { 
 
    width: calc(40% - 10px); 
 
    padding-bottom: calc(40% - 10px) 
 
} 
 

 
.block:nth-child(5) { 
 
    margin-left: calc(40% + 5px) 
 
} 
 

 
.block:nth-child(10) { 
 
    margin-left: calc(-60% + 5px) 
 
} 
 

 
.block:nth-child(15) { 
 
    margin-left: calc(-20% + 5px) 
 
}

<div class="content"> 
 
    <div class="grid"> 
 
    <div class="block" style="background-color: #2be6d9"></div> 
 
    <div class="block" style="background-color: #d0c7dd"></div> 
 
    <div class="block" style="background-color: #f06859"></div> 
 
    <div class="block" style="background-color: #f06859"></div> 
 
    <div class="block" style="background-color: #68d2e7"></div> 
 
    <div class="block" style="background-color: #001fc9"></div> 
 
    <div class="block" style="background-color: #d040e9"></div> 
 
    <div class="block" style="background-color: #fd1341"></div> 
 
    <div class="block" style="background-color: #0c8eec"></div> 
 
    <div class="block" style="background-color: #2be6d9"></div> 
 
    <div class="block" style="background-color: #d0c7dd"></div> 
 
    <div class="block" style="background-color: #f06859"></div> 
 
    <div class="block" style="background-color: #f06859"></div> 
 
    <div class="block" style="background-color: #68d2e7"></div> 
 
    <div class="block" style="background-color: #001fc9"></div> 
 
    <div class="block" style="background-color: #d040e9"></div> 
 
    <div class="block" style="background-color: #fd1341"></div> 
 
    <div class="block" style="background-color: #0c8eec"></div> 
 
    <div class="block" style="background-color: #f06859"></div> 
 
    <div class="block" style="background-color: #f06859"></div> 
 
    <div class="block" style="background-color: #68d2e7"></div> 
 
    <div class="block" style="background-color: #001fc9"></div> 
 
    <div class="block" style="background-color: #d040e9"></div> 
 
    <div class="block" style="background-color: #fd1341"></div> 
 
    </div> 
 
</div>

Answer 1

あなたの問題は、あなたのブロックを作るdiv sの間の空白です。だからあなたの箱は100％で、箱の間に ""を入れます。

divの間の新しい行/スペースを簡単かつ簡単に解決することができます。

また、空白の周りにコメントを追加することもできます（下記参照）。

.content { 
 
    width: 100%; 
 
    margin-top: -5px; 
 
    margin-right: -5px; 
 
    position: relative; 
 
    height: 100%; 
 
} 
 

 
.grid { 
 
    width: 100%; 
 
} 
 

 
.block { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 5px; 
 
    width: calc(20% - 10px); 
 
    padding-bottom: calc(20% - 10px); 
 
    vertical-align: top; 
 
} 
 

 
.block:nth-child(14), 
 
.block:nth-child(18), 
 
.block:nth-child(19), 
 
.block:nth-child(20), 
 
.block:nth-child(5), 
 
.block:nth-child(6), 
 
.block:nth-child(7), 
 
.block:nth-child(8), 
 
.block:nth-child(9) { 
 
    margin-top: calc(-20% + 5px) 
 
} 
 

 
.block:nth-child(1), 
 
.block:nth-child(11), 
 
.block:nth-child(20), 
 
.block:nth-child(6) { 
 
    width: calc(40% - 10px); 
 
    padding-bottom: calc(40% - 10px) 
 
} 
 

 
.block:nth-child(5) { 
 
    margin-left: calc(40% + 5px) 
 
} 
 

 
.block:nth-child(10) { 
 
    margin-left: calc(-60% + 5px) 
 
} 
 

 
.block:nth-child(15) { 
 
    margin-left: calc(-20% + 5px) 
 
}

<div class="content"> 
 
    <div class="grid"> 
 
    <div class="block" style="background-color: #2be6d9"></div><!-- 
 
\t --><div class="block" style="background-color: #d0c7dd"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #68d2e7"></div><!-- 
 
\t --><div class="block" style="background-color: #001fc9"></div><!-- 
 
\t --><div class="block" style="background-color: #d040e9"></div><!-- 
 
\t --><div class="block" style="background-color: #fd1341"></div><!-- 
 
\t --><div class="block" style="background-color: #0c8eec"></div><!-- 
 
\t --><div class="block" style="background-color: #2be6d9"></div><!-- 
 
\t --><div class="block" style="background-color: #d0c7dd"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #68d2e7"></div><!-- 
 
\t --><div class="block" style="background-color: #001fc9"></div><!-- 
 
\t --><div class="block" style="background-color: #d040e9"></div><!-- 
 
\t --><div class="block" style="background-color: #fd1341"></div><!-- 
 
\t --><div class="block" style="background-color: #0c8eec"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #f06859"></div><!-- 
 
\t --><div class="block" style="background-color: #68d2e7"></div><!-- 
 
\t --><div class="block" style="background-color: #001fc9"></div><!-- 
 
\t --><div class="block" style="background-color: #d040e9"></div><!-- 
 
\t --><div class="block" style="background-color: #fd1341"></div> 
 
    </div> 
 
</div>