htmlのレイアウトをcssのみでに変更する方法(目指すレイアウトは画像で貼っています)

Question

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

div{
  display:inline-block;
}
div:nth-child(n+5){
  height:100%;
}
div:nth-child(-n+4){
  height:50%;
}

のときcssのみの変更で(htmlをいじらずに)、レイアウトを下記の様にすることは可能なのでしょうか？親要素にdivを作ればつくれるのは分かるのですが、webサービスのカスタムcssなどをいじるときに使えないので質問しました。

Comments

[m.ts10806]

>webサービスのカスタムcssなど
これは具体的に何を想定しているのでしょうか

[terataitai]

TweetDeckのchrome拡張機能のBetterTweetDeckのカスタムcssからこの質問をしようと思いました。(tweetdeckのカラムはdivタグではなくsectoinタグですが、他のサービスでも似たようなことがあるかもしれないので、divタグで質問しました。)

[m.ts10806]

質問編集して追記してください

Answer 1

ものすごく無理やり実装するなら、以下のような実装も可能と思います。

Codepenでやってみました:
https://codepen.io/new1ro/pen/gOPKvYL

div{
  display: inline-block;
  border: 5px solid #09c;
  width: 20vw; /* 任意の幅 */
  height: 50vh; /* 任意の高さ */
  font-size: 0;
  box-sizing: border-box;
}
div:nth-child(3),
div:nth-child(4) {
  margin-bottom: calc(-50vh - 6px); /* -任意の高さ - 余白 */
  height: calc((50vh * 2) + 6px); /* (任意の高さ * 2) + 余白 */
}

上記について、7つ目のdivを追加した途端破綻したりするはずです。
また本当に採用するなら、display: inline-block;を使ったときに生じてしまう余白をどのようにコントロールするか、という課題は解決する必要はあると思います。

---

6つの<div>の親要素が必要になりますが、以下のような記述だと実現可能です。

<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

.parent {
  display: grid;
  grid-template-rows: 200px 200px; /* 縦方向 */
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 横方向 */
  grid-gap: 10px; /* 余白 */
  
}
.parent div {
  border: 5px solid #09c;
}
.parent div:nth-child(1) {
  
}
.parent div:nth-child(2) {
  
}
.parent div:nth-child(3) {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
}
.parent div:nth-child(4) {
  grid-row: 1 / 3;
  grid-column: 4 / 5;
}
.parent div:nth-child(5) {
  
}
.parent div:nth-child(6) {
  
}

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/grid
https://qiita.com/kura07/items/e633b35e33e43240d363

Answer 2

このdivたちの親要素に触らない前提であれば、方法はないと思います。
なぜならば、heightの%指定には以下のようなルールがあるからです。

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

10.5 Content height: the 'height' property | Visual formatting model details

（勝手訳）
パーセンテージは生成されたボックスの包含ブロックを参照します。もし、包含ブロックの高さが明示的に定義されておらず（たとえば、コンテンツの高さに依存しているなど）、かつ要素が絶対配置されていない場合、'auto'として計算されます。

つまり、親要素のheightの影響を受けておそらくauto扱いになってしまうため、親要素にスタイルをつけないという条件では、確実な方法はありません。（たまたま上手くいくことはあると思います。）