<section class="grid">
  <div class="col12">1</div>
  <div class="col6">2</div>
  <div class="col6">3</div>
  <div class="col4">4</div>
  <div class="col4">5</div>
  <div class="col4">6</div>
  <div class="col2">7</div>
  <div class="col2">8</div>
  <div class="col2">9</div>
  <div class="col2">10</div>
  <div class="col2">11</div>
  <div class="col2">12</div>
</section>
/* base styles & reset */
:root {
  --green: #78b63c;
  --pink: #e30e76;
  --white: #f4fbf1;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  line-height: 1.5;
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;
  text-rendering: optimizeLegibility;
  font-weight: 700;
}

/* colors to show width */
.grid > * {
  color: var(--white);
  background: var(--green);
}

.grid > *:nth-child(even) {
  background: var(--pink);
}

/* grid */

.grid {
/*  implicit grid  */
  display: grid;

  /*  tracks - explicit grid */
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px 200px 200px;
  
  /*  shortcut: rows / columns  */
/*   grid-template: 200px 200px 200px / 200px 200px 200px; */
  
  /*  By default, a grid item cannot be smaller than the content inside of it or than the size defined. This can cause overflow. */
  
/*  Fractional units  */
/*   grid-template-columns: 1fr; */
/*   grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; */
/*   grid-template-columns: repeat(12, 1fr); */

  /*  gap or gutters  */
  gap: 16px;

  /*  Define placement of items on the grid container.
justify - main/inline axis, horizontal in grid
align - cross/block axis, vertical in grid
content - places grid tracks 
        - start, end, center, stretch, space-around, space-between, space-evenly
items - applies self to all children
      - start, end, center, stretch
  */
/*   justify-content: space-between;
  justify-items: center; */
/*  align needs to have a height or rows defined.  */
  height: 100vh;
/*   align-items: center;
  align-content: center; */

  /*   place - shorthand for align and justify
        - items, content, self */
/* 
  place-items: center;
  place-content: center;  */
}

/* .col12 {
  grid-column: span 12;
}

.col6 {
  grid-column: span 6;
}

.col4 {
  grid-column: span 4;
}

.col2 {
  grid-column: span 2;
}

 */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.