sankorati sankorati - 1 year ago 69
CSS Question

Width calculation for blocks in grid

I'm trying to set up a grid of blocks, but even if it seems like I'm making the blocks to fill up 100 % of the container width. They don't seem to line up properly.

The first row should have one big block and three smaller ones. Second should be filled up by the remaining of the first big block, one small and one big block.

It seems as if the total width of the blocks are larger than the container width forcing it to go on the second row and messing up the layout.

Am I missing some property on one of my elements?



.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 Source

Your problem is the whitespace between the divs that make your blocks. So you boxes are 100%, PLUS the " " between the boxes.

Quick and easy solution is to remove the new lines / spaces between the divs.

Alternatively, add comments around the white space (see below).

.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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download