<div class="grid-wrapper">
  <div class="elem elem1"><h2>Element 1</h2></div>
  <div class="elem elem2"><h2>Element 2</h2></div>
  <div class="elem elem3">
    <h2>Element 3</h2>
    <p>Element 3 paragraph 1</p>
    <p>Element 3 paragraph 2</p>
  </div>
</div>
.grid-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 4fr;
  gap: 30px;
}

.elem1 {
  grid-column: 1;
  grid-row: 1;
}

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

.elem3 {
  grid-column: 1 / -1;
  grid-row: 2;
}

body {
  margin: 30px;
  padding: 0;
}

.elem {
  background-color: pink;
  border-radius: 6px;
  padding: 20px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.