逆N字のリスト

説明

広い画面では次のように逆N字に並べる

1,3,5はテキスト
2,4,6は画像

1 4 5 ...
2 3 6 ...

狭い画面では縦に積む

Flexboxのorderではできない見た目になっている。

4n-1番目のli要素だけ位置をずらす

4n-1番目のli要素だけgrid-row: 2;を指定して、位置をずらす。

li:nth-child(4n-1) {
  grid-row: 2;
}

CSSをいじらずとも、li要素を追加すれば右側に増やしていくことができます。

HTML

<ul>
  <li>
    1.The quick brown fox jumps over the lazy dog.
  </li>
  <li>
    <img src="http://lorempixel.com/output/animals-q-g-200-200-2.jpg" alt="">  
  </li>
  <li>
    3.The quick brown fox jumps over the lazy dog.
  </li>
  <li>
    <img src="http://lorempixel.com/output/animals-q-g-200-200-3.jpg" alt="">  
  </li>
  <li>
    5.The quick brown fox jumps over the lazy dog.
  </li>
  <li>
    <img src="http://lorempixel.com/output/animals-q-g-200-200-6.jpg" alt="">  
  </li>
</ul>

このHTMLへ修正リクエストをする

CSS

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column dense;
  padding: 0;
  gap: 10px;
  list-style: none;
}

li { padding: 10px; }

li:nth-child(4n-1) {
  grid-row: 2;
}

img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 300px) {
  ul {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }
  li:nth-child(4n-1) {
    grid-row: auto;
  }
}

/* 装飾 */
ul {
  max-width: 800px;
  margin: 0 auto;
}
li:nth-child(even) { border: 1px solid blue; }
li:nth-child(odd) { border: 1px solid green; }
li:nth-child(4n-1) { border: 1px solid red; }

このCSSへ修正リクエストをする