Chrome 117は先週安定しました。 ウェブサイトがあります ちなみに、Chromeリリースの計画が何であるかを見ることができます。
Chromeは月に1回ほどメジャーバージョンをリリースしますが、通常、Ultraがそれについて何かを書くことを強いられているとは感じていません。レイチェル・アンドリューは、この過去のように、Web.devで毎月Webプラットフォームの更新をカバーする素晴らしい仕事をしています 8月にWebプラットフォームに新しくなった。
しかし、私はこれに非常に興奮していますが、それは意味するので subgrid 現在、3つの主要なブラウザすべてに出荷されています。クロムはここでストラグラーでした：
Caniuseは、サポートをチェックするだけでなく、見るための素晴らしいサイトです いつ サポートがあるバージョンが出荷されました。
サブグリッドが何であるかを説明せずに、あまりにも多くの単語を入力しないように…それはで動作するキーワードです grid-template-columns そして grid-template-rows これにより、親グリッドから要素を通過するグリッドラインを吸うことができます。
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.child {
grid-column: 2 / 4;
display: grid;
grid-template-columns: subgrid;
}あなたのブラウザはそれをサポートしていますか？おそらく、しかし、そのチェックをチェックしてコーディングすることはまだ良いことです。 ブラマスにはペンがあります それは速いチェックです。 CSS機能 @supports 仕事に就いています：
output::after {
content: "❌ Your browser does not support subgrid";
}
@supports(grid-template-rows: subgrid) {
output::after {
content: "✅ Your browser supports subgrid";
}
}
おそらく最も古典的な例は、グリッドにカード要素を設定し、「共有」グリッドラインに従ってカードを備えた要素を並べることです。 Jheyにはそのようなデモがあります 基本の。
また、カードのアイデアをプレイしました、これはおそらく、背景の色が互いにぶつかるような自然な線がある場合にさらに明白です：
時々私の好きなユースケースはそうです 少しitty bitty tiny そうでなければ迷惑または不可能なものをうまく引き離すことができません。例えば！ CSSの調整 counters リスト項目。以下の最初の例では、リスト項目のコンテンツが左側の左であるが、2番目の例ではうまく調整されている方法を参照してください。この場合、使用して発生します subgrid これらすべてのカウンターを本質的に作成します 親リストアイテムグリッドから列線を共有する。
その例とさらにいくつかは出身です 私がデイブでやったビデオ 少し前に、Subgridのあらゆる種類の使用を見ていました。
私のお気に入りのもう一つ？ 可変長さのラベルを持つWebフォームの並べ替え。 エリック・マイヤーが言ったときにエリック・マイヤーが示したユースケース サブグリッドは「不可欠と見なされます」 7年前 Subgridが出荷される前。エリックは、SubgridがなくてもGridがかなり便利であることが証明されているため、少し間違っていたかもしれませんが、今ではMoresoでもあることは間違いありません。
より多くのビデオ、あなたは言いますか？できる！
gap、しかしする必要はありません！ 
Be the first to comment
