<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
* { box-sizing: border-box; }

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 2em Sansita, sans-serif;
}


.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
    
}

.grid > * {
  padding: 20px;
  border: 5px solid rgb(198,164,154);
  background-color: rgba(198,164,154,.2);
  border-radius: 5px;
}

.grid > *:nth-child(4n+1) {
  grid-row: auto / span 2;
}

.grid > *:nth-child(3n+1) {
  border: 5px solid rgb(214,129,137);
  background-color: rgb(233,78,119);
  color: #fff;
  grid-column: auto / span 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.