CSSグリッド仕様を読んで学んだ11のこと

アレックス・クンチェフスキーのイラスト

2017年6月11日、私はCSSグリッド仕様を読むことにしました。

仕様は少し技術的でしたが、これまで読んだ中で最も楽しかった仕様でした。より高度な開発者の場合は、将来の参考のためにブックマークしてください。

それで、これは役に立ちますか?

優れたエンジニアと優れたエンジニアの違いは、後者が実際に内部で何が起こっているのかを理解するのに時間がかかることだと思います。 「コピーアンドペースト」ではなく、物事の仕組みを学びます。

だから、あなたは素晴らしい開発者になりたいですか?

地獄、ええ。または、この記事を読んでいないでしょう。

学ぶこと

仕様を読みながら、私はいくつかの非常に微妙だが深遠な詳細を学びました。

この記事では、それらをあなたと共有します。

1. CSSグリッドは宣言的です

宣言型APIはとても使いやすいです。 ReactJSをお考えですか?

Webサイトが単純なドキュメントから複雑でインタラクティブなアプリケーションに進化するにつれて、Webレイアウトの作成が難しくなりました。とても難しい、彼らは私の悪夢でした。

これがまさにCSSグリッドが今日解決しようとしている問題です。

仕様から。

CSSグリッドは、インテリジェントなレイアウトを作成するという痛みを伴うプロセスを取り除き、それをプロセスをほぼ楽にする宣言ルールの美しいセットに置き換えます。

これらはCSSの歴史の中で良い時期です。

2.小​​数単位は、常に等間隔の行と列を生成するとは限りません

CSSグリッドについて誰もが最初に学び、愛することの1つは、分数単位です。アヒルでさえ逃げることができます。

小数単位は、パーセンテージの計算の苦痛を取り除きます。一緒に仕事ができてうれしいです。

ほとんどの人は、小数単位(fr)が等間隔の列または行を生成することを教えます。

たとえば、1fr 1fr 1frのような宣言は、等間隔の列または行を提供することが期待されています。以下の図を参照してください。

小数単位で作成された等間隔の列。

悲しいことに、これは必ずしも真実ではありません。貧しいアヒル。

以下は仕様からのものです。

frユニットは使用可能なスペースを埋めますが、グリッドコンテナーの最小サイズまたは行または列のコンテンツよりも決して小さくなりません。

基本的に、最小幅または最小高さの宣言を持つ画像、img、または任意のグリッドアイテムがある場合、小数単位で予期しない結果が生じる可能性があります。

濡れた怖いアヒルのように周りをいじくり回した後、私は多くの時間をフラクショナルユニットで実験しました。調査結果に関する記事を書きました。

3.グリッドのサイズがどのように設定されているか、実際にはわかりません。または、あなたは?

CSSグリッド定義は、常に次の行で始まります。

ディスプレイ:グリッド

多くの場合、その後に行と列の定義が続きます。このようなもの:

grid-template-rows:10px 1fr 3fr
グリッドテンプレート列:1fr

最後に、グリッドアイテムは自分に合った手法で配置する可能性があります。

グリッドアイテムを配置する方法は多数あるため、簡潔にするために必要なコードは省略します。

だから、ここに問題があります。

内部では、グリッドの行と列のサイズが最初に計算されてからアイテムが配置されると想定する必要があります。右?

まあ、真実は完全に反対のようです。

なんて変だ。

以下は仕様からのものです。

2.3。グリッドのサイズ変更
グリッドアイテムが配置されると、グリッドトラック(行と列)のサイズが計算され、それらのコンテンツのサイズやグリッド定義で指定された使用可能なスペースが考慮されます。

進行に注意してください。

  1. グリッド項目が配置されます。
  2. グリッドトラックのサイズが計算されます

これについて質問がありそうです。それで、私はあなたのそれらの懸念を解決しようとします。

まず、すべてのグリッド項目にgrid-areaが割り当てられていることに注意してください。グリッドアイテムは、この領域内でサイズ変更されます。では、トラックのサイズをまだ計算せずに、グリッドアイテムをどの程度正確に配置しますか?

仕様のグリッドアイテムの配置セクションを見ると、手がかりが見つかります。

グリッドのサイズを決める際には多くのことが考慮されますが、これには主にグリッドアイテムのサイズが含まれます。

グリッドのサイズ設定は、以下に基づいている場合があります。

  • 固定サイズ関数(長さまたは解決可能な割合)。
  • 組み込みのサイジング関数(最小コンテンツ、最大コンテンツ、自動、適合コンテンツ())、または
  • 柔軟なサイジング機能(フレックス)。

私が内部で起こると信じていることは、グリッド項目が配置されているということです。

つまり、アイテムの包含ブロックが決定され、アイテムのサイズ設定関数が決定されます。これは、グリッドトラックのサイズに影響します。

分かりますか?

あなたが最初に考えたものではありません。

4.デフォルトでは、グリッド項目はグリッド領域に合わせて引き伸ばされます—特定の場合を除きます

介入なしでは、グリッドアイテムは常にグリッド領域に合わせて伸縮します。

したがって、次のような宣言がある場合:

grid-template-areas: 'header header header'
                     「サイドバーメインメイン」
                     「サイドバーフッターフッター」

そして、次のように、特定のグリッド領域に割り当てられたdivがありました。

.div1 {
   グリッド領域:ヘッダー
}
.div2 {
   グリッド領域:サイドバー
}
.div3 {
   グリッド領域:メイン
}
.div4 {
   グリッド領域:フッター
}

divの幅と高さを100%に宣言する必要はありません

それらは自動的に伸びてそれぞれの領域を埋めます。

さて、ここでキャッチです。

この動作は、画像と矛盾しています。

レイチェル・アンドリューが指摘したように、仕様では、この動作は固有のアスペクト比を持つグリッド項目では異なると述べています。

大きな言葉で怖がらせないでください。デモゴルゴンではありません。

画像はデフォルトではインラインブロック要素ですが、特定の寸法もあります。それらには自然に関連付けられた次元があります。画像は、幅400ピクセルx幅600ピクセル、または任意のサイズです。

ただし、divsなどの通常のブロック要素には固有の次元はありません。つまり、それらには自然に属する次元がありません。

したがって、固有の寸法を持たないグリッドアイテムはグリッド領域に収まるように伸びますが、これは画像などの固有の寸法を持つグリッドアイテムには当てはまりません。

5.グリッドアイテムとは何か本当に知っていますか?

以下のコードブロックを検討してください。

    
ブロック     
float         私はランダムなテキストです     <スパン>         アイテム4     

上記のコードブロックでは、グリッド項目を見つけることができますか?

コードブロックには3個または4個のグリッドアイテムがいくつありますか?

私はこの質問に露骨に失敗しました。

私がランダムなテキストであるテキストは、htmlタグでラップされていないことに注意してください。

どっち?

それで、あなたの答えは何ですか?

まあ、あなたが3を答えた場合、あなたは間違っています。ハハ、やった!

仕様によると、匿名のグリッドアイテムは、グリッド内のテキストの各実行の周りにラップされます。

はい、それはランダムなテキストがグリッド項目でもあることを意味します。

ブロック     
float
    <!-以下のテキストはグリッド項目です->
    私はランダムなテキストです

    <スパン>
        アイテム4
    

答えは4です。3つの明示的なグリッドアイテムと1つの匿名グリッドアイテムがあります。

わかった?

6.隣接するグリッドアイテムの余白は折りたたまれません。

ブロック要素とグリッドコンテナには大きな違いがあります。

つまり、ディスプレイのある要素:ブロックとディスプレイのある要素:グリッドには多くの根本的な違いがあります。

ここで議論することを選択している違いは、折りたたみ可能なマージンに関係しています。

CSSで最初に学ぶことの1つは、折りたたみ可能なマージンの概念です。折りたたみ可能なマージンの意味を説明するのに多くの時間を費やしたくありません。あなたがコメントでそれを持ち出すならば、私はそうします。

それでは、グリッドに戻りましょう。

すべてのグリッドアイテムで、マージンが縮小されることはありません。

まあ、これは理解できます。理由をお見せしましょう。

隣接するグリッドアイテムは、グリッド領域によって形成される包含ブロック内に独立して含まれます。

上記の複雑な段落の意味はこれです。各グリッド項目は、グリッド領域内に存在し、呼吸します

グリッド項目は、それぞれのグリッド領域内に配置されます。彼らは彼ら自身の邪魔されない領域にとどまります。折りたたみ可能なマージンの影響を受けません。なんてかっこいい。

したがって、技術的には、グリッドアイテムは他のグリッドアイテムのすぐ隣ではないと言うことができます。しかし、連続した閉じた領域、つまりグリッド領域に含まれています。

ブロック要素とグリッド要素の間に他にどのような違いがあるのか​​知りたい場合は、このテーマに関する興味深い記事を書きました。

7.自動入力および自動調整。違いは何ですか?

自動入力と自動調整は同じ機能のように見えますが、方法が異なります。

それらは、何らかの方法でグリッドコンテナを埋めるグリッドトラックを自動的に作成できるという意味で似ています。

たとえば、次のコードは、ウィンドウ幅に収まるだけの200px列を作成します。残りのスペースがある場合、200px列に分散されます。

体 {
  ディスプレイ:グリッド。
  グリッドテンプレート列:repeat(auto-fill、minmax(200px、1fr));
}

違いは何ですか?

自動入力は、それを埋めるグリッド項目がなくてもトラックを作成します。自動調整はこれを行いません。空のトラックをゼロにします。

それで全部です。

8. grid-template-areas定義では、文字列内の単語の数は等しくなければなりません。

マップのように見える奇妙なgrid-template-areas値を覚えていますか?

まあ、それは本当に速く物事を台無しにすることができるようです。

grid-template-areas宣言では、すべての文字列の列数が同じである必要があります。そうでない場合、宣言は無効です。

例えば:

/ *これは有効です* /
grid-template-areas:「ヘッダーヘッダーヘッダーサイドバー」
                     「メインメインメインサイドバー」
                     「メインメインメインサイドバー」
/* これは間違っています */
grid-template-areas:「ヘッダーヘッダーヘッダーサイドバー」
                     「メインメインメインサイドバー」
                     「メインメインサイドバー」

文字列の単語数は等しくなければなりません。

9.グリッド項目のパディングまたはマージンにパーセンテージを完全に使用しない

CSSグリッド仕様から

この背後にある理由は簡単です。この記事の執筆時点では、ブラウザごとに異なる動作が発生します。

仕様によると、パーセンテージは要素の幅のみに対して解決されるか、上/下が高さに対して解決される一方で、左/右マージンが幅に対して解決される場合があります

ほとんどのブラウザで一貫したレンダリングを行うには、グリッドアイテムのパディングまたはマージンにパーセンテージを使用しないでください。

さらに重要なこととして、CSSグリッドには既にいくつかの混乱する部分があります。グリッドアイテムにパーセンテージの余白や余白を入れて足で撃たないでください。

10.競合がある場合、明示的グリッドのサイズはどのように解決されますか?

次のようなグリッド宣言があると仮定します。

grid-template-areas:「ヘッダーヘッダーヘッダーサイドバー」
                     「メインメインメインサイドバー」
                     「メインメインメインサイドバー」

上記のコードブロックには、4つの列と3つの行があります。

これも行った場合:

grid-template-columns:repeat(5、1fr)
grid-template-rows:repeat(4、1fr)

これで、列と行が増えました。 5列、4行。

分かりますか?

現在、宣言に矛盾があります。それで、これはどのように解決されますか?

仕様によると、明示的なグリッドのサイズは、grid-template-areasで定義された行/列の数と、grid-template-rows / grid-template-columnsでサイズ設定された行/列の数の大きい方によって決まります。 。

仕様は複雑なように思えるかもしれませんが、単純なことです。わかりやすい言葉で言えば、行または列の数が多い宣言が優先されます。

上記の例では、グリッドは5列を占め、4行と3行ではなく4行を占めます。

*編集:grid-template-areasプロパティは、グリッドにグリッド項目を配置するために使用されます。それでは、なぜグリッド定義に矛盾があるのでしょうか?グリッドは、grid-template-columnsおよびgrid-template-rowsプロパティのみで定義されることになっていますか?コメント欄でこれに答えます。見てみな。

11.グリッドのサイズは、純粋にトラックサイズの合計ではありません

グリッドトラックとは、グリッド線間の距離を指します。

これは簡単ですが、固定幅のグリッドが設定されている場合に言及する価値があります。

グリッドのサイズは、grid-row-gap、grid-column-gap、justify-content、align-contentの影響を受ける場合があります。悲しいことに、トラック間にスペースを追加することもできます。

そのため、グリッド内の固定幅を計算するときは注意してください。

ボーナス:DOCSの改善に貢献できます

私は優しい魂だから、ここにもう1つのヒントを追加しました

仕様は人間によって書かれました。そして、人間が間違いを犯す可能性があります。

仕様を読んでいるときに、小さなタイプミスを見つけました。

当時、私は特に何をすべきか確信がありませんでした。だから、私はTwitterで尋ねた。

親切なJen Simmonsはgithubに問題を報告するのを助け、それは修正されました。

だから、道徳は何ですか?

可能な限りの方法で貢献することで、ドキュメントをより良くすることができます。

そう、あなた!

一緒にウェブを改善しましょう。

プロになりたいですか?

無料のCSSグリッドガイドをダウンロードし、2つの品質のインタラクティブFlexboxコースを無料で入手してください!

CSSグリッドをマスターする方法とその過程で構築するもの(無料PDFガイド)

今すぐ入手