Grid example of fixed size spanner getting extra space

Grid example of fixed size spanner getting extra space.markdown

Grid example of fixed size spanner getting extra space

I have a grid container sized in absolute units, with grid tracks also sized using absolute units. The sum of the tracks in both directions is smaller than the container.

Using the keyword values space-around and space-between increases the spacing between tracks. Any grid area that spans one of these gaps thus gains width or height as the space is added to the total width/height.

A Pen by rachelandrew on CodePen.

index.html

<div class="wrapper">
    <div class="item1">One</div>
    <div class="item2">Two</div>
    <div class="item3">Three</div>
    <div class="item4">Four</div>
    <div class="item5">Five</div>
</div>

<div class="wrapper aligned">
    <div class="item1">One</div>
    <div class="item2">Two</div>
    <div class="item3">Three</div>
    <div class="item4">Four</div>
    <div class="item5">Five</div>
</div>

style.css

.wrapper {
  margin: 0 0 20px 0;
  width: 500px;
  height: 400px;
  border: 2px solid #CCC;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: repeat(3,100px);
}

.wrapper.aligned {
  align-content: space-around;
  justify-content: space-between;
}

.wrapper > div {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.item1 {
  grid-column: 1 / 5;
}

.item2 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.item3 {
  grid-column: 3 / 5;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fafafa;
  color: #000;
  margin:40px;
}