<span>
  <b>1</b>
  <b>2</b>
</span>

<span class="template-2col">
  <b>1</b>
  <b>2</b>
</span>

<span class="template-3col">
  <b>1</b>
  <b>2</b>
  <b>3</b>
</span>

<span class="template-4up">
  <b>1</b>
  <b>2</b>
  <b>3</b>
  <b>4</b>
</span>

<span class="template-sidebar--left">
  <b>1</b>
  <b>2</b>
  <b>3</b>
</span>

<span class="template-sidebar--right">
  <b>1</b>
  <b>2</b>
  <b>3</b>
</span>
// For more reasons to love grid, check out my article:
// @link https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/
// Or my additional articles that cover grid:
// @link https://moderncss.dev/topics/#grid

* {
  box-sizing: border-box;
}

span {
  background: #fff;
  padding: 1rem;
  border-radius: 7px;
  box-shadow: 0 2px 6px -2px rgba(black, 0.42);
  height: 30vh;

  display: grid;
  grid-gap: 0.5rem;

  b {
    background-color: #7B86F5;
    border-radius: 4px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.5rem;
  }

  &.template {
    
    // Using `repeat()` lets us explicitly define
    // the number of rows or columns to allow
    &-2col {
      grid-template-columns: repeat(2, 1fr);
    }

    &-3col {
      grid-template-columns: repeat(3, 1fr);
    }

    // NOTE: The 2col will also create this arrangement,
    // this is just more explicit
    &-4up {
      // grid-template-rows / grid-template-columns
      grid-template: repeat(2, 1fr) / repeat(2, 1fr);
    }

    &-sidebar--left {
      grid-template: "sidebar mainA"
                "sidebar mainB";

      > :nth-child(1) {
        grid-area: sidebar;
      }
    }

    &-sidebar--right {
      grid-template: "mainA sidebar"
                "mainB sidebar";

      > :nth-child(3) {
        grid-area: sidebar;
      }
    }
  }
}

body {
  background: #f9f9f9;
  min-height: 100vh;

  display: grid;
  grid-template-columns: repeat(auto-fit, 30ch);
  place-content: center;
  grid-gap: 5vh;
  max-width: calc((30ch * 3) + (5vh * 2) + 2rem);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.