<h1>Implicit and Explicit Grid</h1>

<div class="grid-container">
  <div class="grid-element element-a">
    <p>I</p>
  </div>
  <div class="grid-element element-b">
    <p>II</p>
  </div>
</div>
body {
  text-align: center;
  font-family: "Dosis";
  margin: 20px 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 200px;
  grid-auto-columns: 100px;
}

.grid-element {
  background-color: #444;
  color: #fff;
  font-size: 2em;
  padding: 20px;
}

.element-a {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #6F9;
}

.element-b {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #69F;
}

p {
  color: black;
  background: #fff;
  padding: 10px;
  margin: 0;
  margin-top: 50px;
}

h1 {
  text-align: left;
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Dosis

External JavaScript

This Pen doesn't use any external JavaScript resources.