Margins are off in grid

Question

I am trying to fix the margins so that the design of my grid looks even. However on the last row, the part with 2 elements is always off by a few pixels and I haven't been able to fix it. The only way it evens out is if I set the right margin on the very bottom right element to 0. But that removes the margin. Here is the codepen.

Code:

HTML

<div class="container">
  <div class="row">
    <div class="square">1x1</div>
    <div class="square">2x1</div>
    <div class="square">3x1</div>
  </div>
  <div class="row">
    <div class="square">2x1</div>
    <div class="square">2x2</div>
    <div class="square">2x3</div>
  </div>
  <div class="row">
    <div class="square2">3x1</div>
    <div class="square3">3x2</div>
  </div>
</div>

CSS

body,
.container
  position: relative
  top: 0
  left: 0
  width: 100%
  height: 100vh
.container 
  display: flex
  background-color: #afafaf
  flex-direction: column
  justify-content: space-between
.row
  background-color: #e5e5e5
  flex: auto
  display: flex
  flex-direction: row
  justify-content: center

.square
  background-color: #cacaca
  flex: 1
  display: flex
  text-align: center
  justify-content: center
  flex-flow: column wrap
  margin: 5px

.square2
  background-color: #cacaca
  flex: 2
  display: flex
  text-align: center
  justify-content: center
  flex-flow: column wrap
  margin-right: 5px
  margin-left: 5px
  margin-top: 5px
  margin-bottom: 5px
.square3
  background-color: #cacaca
  flex: 1
  display: flex
  text-align: center
  justify-content: center
  flex-flow: column wrap
  margin-top: 5px
  margin-bottom: 5px
  margin-right: 0px
  margin-left: 5px

You are using `flex-grow` to make your grid. This property doesn't actually size flex items. It distributes free space in the container. The first two rows have more margin space than the last row. Notice how rows 1 & 2 have two gutters, but row 3 only has one. That's the source of the misalignment. — Michael Benjamin, Dec 22 '16 at 03:25

Margins are off in grid

0 Answers0