<div class="cont">
  <h1>Grid Alignment</h1>
  
  <p>Aligning items within their grid areas.</p>

  <h2>Initial values:</h2>
  <ul>
    <li>Block Axis align-items: stretch</li>
    <li>Row Axis justify-items: stretch</li>
  </ul>
  
  <p>I have added a background image to the grid container in order that we can see the defined areas.</p>

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

<div class="cont">
  <h2>Aligning on the Block Axis</h2>

  <p>By changing the value of align-items we align all items inside the grid areas defined.</p>
  <p>We can also add a property of align-self on any individual child, to give it different alignment. In this example align-items is set to center. Item 2 to stretch.</p>
</div>
<div class="code">
  <div class="wrapper example2">
    <div class="item1">One</div>
    <div class="item2">Two</div>
    <div class="item3">Three</div>
    <div class="item4">Four</div>
  </div>
</div>

<div class="cont">
  <h2>Aligning on the Row Axis</h2>

  <p>By changing the value of justify-items we align all items inside the grid areas defined.</p>
  <p>We can also add a property of justify-self on any individual child, to give it different justify value. In this example justify-items is set to center. Item 2 to stretch.</p>
</div>
<div class="code">
  <div class="wrapper example3">
    <div class="item1">One</div>
    <div class="item2">Two</div>
    <div class="item3">Three</div>
    <div class="item4">Four</div>
  </div>
</div>


</div>
.example2 {
    align-items: center;
}

.example2 .item2 {
  align-self: stretch;
}

.example3 {
    justify-items: center;
}

.example3 .item2 {
  justify-self: stretch;
}

.wrapper {
  width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 150px 150px 150px 150px;
  grid-gap: 10px;
  background-color: #fafafa;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/smashing-grid-alignment-bg.png);
}

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

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

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

.item4 {
  grid-column: 1 / 4;
  grid-row: 4;
}

.wrapper div {
  padding: 10px;
  background-color: rgba(41,73,130,.5);
  color: #fff;
  border-radius: 5px;
}

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:0;
}

.cont {
  width: 800px;
  margin: 0 auto;
}

.code {
  background-color: #333;
  padding: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.