CSS photo grid v3

by Julien Roche

HTML

<section class="grid">
  <div class="grid__cell"></div>
  <div class="grid__cell grid__cell--col-2"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell"></div>
  <div class="grid__cell"></div>
</section>

CSS

html,
body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

body {
  display: flex;
}

.grid {
  background-image: url("https://images.pexels.com/photos/206602/pexels-photo-206602.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
  background-repeat: no-repeat;
  background-size: cover;
  border: 6px solid black;
  display: grid;
  flex: 1 1 0;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  mix-blend-mode: 
}

.grid__cell {
  background-color: transparent;
  border: 6px solid black;
}

.grid__cell--col-2 {
  grid-column: span 2;
}