CODEWITHSUNDEEP
css
sankorati
sankorati

Reputation: 137

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>

Upvotes: 0

Views: 236

Answers (1)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

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>

Upvotes: 2

Related Questions