1 large + 3 small images: CSS Grid layout

Programming
, , ,
1

I need to arrange the given code to achieve a grid view as shown in the screenshot below:

enter image description here

The first image in the row should be full width (100%), and the second row should contain three images of equal width.

DEMO: http://jsfiddle.net/gycmp21k/

Fenced code blocks:

body {
  padding: 40px;
}

* {
  margin: 0px;
  padding: 0px;
}

ul {
  list-style: none;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}

li:first-child {
  grid-row: span 2;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<ul>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
</ul>
2

To achieve the desired grid view, arrange the given code as follows:

<style>
  body {
    padding: 40px;
  }

  * {
    margin: 0px;
    padding: 0px;
  }

  ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
  }

  li:first-child {
    grid-column: 1 / span 3;
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<ul>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
</ul>

You can see the result in this JSFiddle demo.