こんにちは。

ひっさしぶりにWordPressの管理画面に入った、どうも柴田です。

今日はちょっとしたスニペットをご紹介します。

俺流レイアウトCSS「OlayoutCSS」でも採用してるんですが、ちょうどそこで使ってるアイデアと同じようなアイデアがXで流れてきたので、おおーー！！ってなり、僕も少し書いてみようかなと思って重い腰を上げました。（Olayoutは1年以上コツコツ作ってますが、まだ完成してません）

HTMLを書きながら自由な列数のGridを使うちょっとした方法です。

style属性の属性セレクターとCSSのカスタムプロパティをを活用して、以下のようなCSSを書いておきます。

レシピ

.l-grid {
  --grid-layout: minmax(0, 1fr);
  --grid-auto-fit: minmax(min(var(--min-size, 300px), 100%), 1fr);

  display: block grid;
  grid-template-columns: var(--grid-cols, none);


  &:where([style~="--cols:"]) {
    --grid-cols: repeat(var(--cols), var(--grid-layout));
  }

  &:where([style~="--md-cols:"]) {
    @media (width >= 768px) {
      --grid-cols: repeat(var(--md-cols), var(--grid-layout));
    }
  }

  &:where([style~="--lg-cols:"]) {
    @media (width >= 1024px) {
      --grid-cols: repeat(var(--lg-cols), var(--grid-layout));
    }
  }


  &:where([style*="--cols: auto-fit"]),
  &:where([style*="--cols:auto-fit"]) {
    --grid-cols: repeat(var(--cols), var(--grid-auto-fit));
  }
}

解説

ちょっと解説してみます。

まずは、grid の grid-template-columns をカスタムプロパティで自由に設定できるようにします。

grid-template-columns: var(--grid-cols, none);

そして、列数を決めるためのカスタムプロパティをHTMLのstyle 属性で設定するようにします。

<div class="l-grid" style="--cols: 2;">
...
</div>

あとは、そのHTML側で設定した、カスタムプロパティ名を属性セレクタで指定し、スタイルがヒットすれば、そのカスタムプロパティが列数として設定される仕組みを用意すればOKです。

&:where([style~="--cols:"]) {
  --grid-cols: repeat(var(--cols), var(--grid-layout));
}

これで、HTML側で設定した列数の値が --grid-cols にって指定した列数になります。

ちなみに、:where() はなくてもいいです。詳細度をあげないために使ってます。

対応ブラウザのこともあるし、まだWD（草案）なので必要に応じて外してください。

[style~="カスタムプロパティー名"] の 属性セレクタにある、~=は属性値内の半角スペース区切りの文字列と一致する要素にスタイルを当てることができますし、 *= だと、属性値内に指定した文字列が含まれていればその要素にスタイルを当てれますので、この辺りを活用すると便利です。

これらを活用してメディアクエリごとにスタイルを用意しておけば、以下のようなHTMLを書けば、自由に列数を指定できます。

<!-- 小さい画面幅では2列、768px以上で3列、1024px以上で4列 -->
<div class="l-grid" style="--cols: 2; --md-cols: 3; --lg-cols: 4">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

<!-- 最小200pxの幅でauto-fit -->
<div class="l-grid" style="--cols: auto-fit; --min-size: 200px">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

正直、Gridの列数ぐらいだったら、あらからじめ列数に応じたセレクタを用意しておけばそれでも十分な気もしますが・・・。

ま、こういう感じでスタイルを用意しておけば記述量もすくなく、何列でも好きなようにできます。

列だけじゃなく、行も自由に指定できるようにする場合は、grid-template-rows を使ってスタイルを追加したりしてみてください。

これはあくまでGridに活用した例ですが、flex や gap や font-size などなどさまざまなところに応用できます。

俺流レイアウトCSS「OlayoutCSS」では、このようなカスタムプロパティを活用し、自由にさまざまなスタイルをHTML側から当てれるようにしていたり、そもそもカスタムプロパティを使わなくてもカスタムデータ属性を活用して、HTMLを書きながら簡単にさまざまなレイアウトを構築できるような仕組みを作ってます。

実際のサイト制作でも何度も使ってみてるんですが、まだちょっと改良が必要だなと思うところがあるので、なかなか完成しませんが、カスタムプロパティやカスタムデータ属性を活用して便利にレイアウトできるようなものを作ってます。

まぁ、結局TailwindCSSとかの方が便利な気がしてきて、ここ最近作る元気がなくなってきて、ほぼ放置状態なんですけどね。

きっと完成しないんでしょうね。サクラダファミリアみたい。

超雑な記事になりましたが・・・では。