html - 按特定顺序和对齐排列的照片网格

Question

我正在尝试重新创建这个:

https://i.imgur.com/QlG5Xgg.png

如您所见，每个元素都是一个正方形。 #1 比其他的大 (400x400)，而其他的是 200x200，每个正方形之间有 2 像素的空间。

我怎样才能按照这个特定的顺序重新创建它，以便不适合容器的方 block 隐藏在屏幕之外？

这是我开始的 JSFiddle，但它没有顺序:

https://jsfiddle.net/ugsquz01/5/

HTML:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

CSS:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 400px;
}

li {
  width: 200px;
  height: 200px;
  display: block;
  background: red;
  color: white;
  font-size: 72px;
  font-weight: 700;
  line-height: 200px;
  text-align: center;
}

li:first-of-type {
  width: 400px;
  height: 400px;
  line-height: 400px;
}

Answer 1

我认为这就是您要找的东西..您可以稍后再考虑..

展开 html 区域屏幕以查看结果。

https://jsfiddle.net/gc1hby6v/

<ul>
  <li class="bigFull">1</li>
  <div class="club">
    <li class="smallHalf">2</li>
    <li class="smallHalf">3</li>
  </div>
<div class="club">
    <li class="smallHalf">4</li>
    <li class="smallHalf">5</li>
  </div>
  <div class="club">
    <li class="smallHalf">6</li>
    <li class="smallHalf">7</li>
  </div>
  <div class="club">
    <li class="smallHalf">8</li>
    <li class="smallHalf">9</li>
  </div>
</ul>


ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 400px;
}

li {
  width: 200px;
  height: 200px;
  display: block;
  background: red;
  color: white;
  font-size: 72px;
  font-weight: 700;
  line-height: 200px;
  text-align: center;
}

.bigFull {
  width: 400px;
  height: 400px;
  line-height: 400px;
  display:inline-block;
  float:left;
  margin:2px;
}

.club{
  float:left;
}


.smallHalf {
  width: 200px;
  height: 200px;
  line-height: 200px;
  margin:1px;
}