CSS グリッドの暗黙的なグリッドと自動配置機能の探索

プラトン再発行

フォロワー： 0

CSS グリッドを使用する場合、最初に行うことは次のように設定することです display: grid グリッドコンテナになりたい要素に。次に、次の組み合わせを使用してグリッドを明示的に定義します grid-template-columns, grid-template-rows, grid-template-areas. そこから、次のステップはグリッド内にアイテムを配置することです。

これは使用すべき古典的なアプローチであり、私もお勧めします。ただし、グリッドを作成する別の方法があります 明示的な定義なしに. これを 暗黙的なグリッド.

　 grid-template-rows, grid-template-columns, grid-template-areas プロパティは、形成する固定数のトラックを定義します 明示的なグリッド. グリッドアイテムがこれらの境界の外側に配置されると、グリッドコンテナーは暗黙的なグリッドラインをグリッドに追加することにより、暗黙的なグリッドトラックを生成します。これらの行と明示的なグリッドフォーム 暗黙のグリッド.

したがって、簡単に言えば、定義されたグリッドの外に要素が配置された場合に備えて、ブラウザーは追加の行と列を自動生成します。

自動配置についてはどうですか？

暗黙的なグリッドの概念と同様に、自動配置グリッド内にアイテムを自動的に配置するブラウザーの機能です。各項目の位置を常に指定する必要はありません。

さまざまなユースケースを通じて、そのような機能が複雑で動的なグリッドを数行のコードで作成するのにどのように役立つかを見ていきます。

ここでは、XNUMX つの異なるレイアウトがありますが、それらすべてで機能するグリッド構成は XNUMX つだけです。

main {
  display: grid;
  grid-template-columns: 1fr;
}

すべての空き領域を占めているのは XNUMX つの列だけです。これが「明示的な」グリッドです。 XNUMX つのグリッドアイテムに収まるように設定されています。 main グリッドコンテナ。それで全部です。 XNUMX 列 XNUMX 行:

しかし、そこに別の要素をドロップすることにした場合はどうなるでしょうか。 aside (動的サイドバー)。現在 (そして明示的に) 定義されているため、グリッドはその要素の場所を見つけるために自動的に調整する必要があります。そして、CSS で他に何もしない場合、DevTools は何が起こっているかを教えてくれます。

この要素は、コンテナに明示的に設定された列全体を占有します。その間、2 と 3 のラベルが付いた暗黙のグリッド線の間の新しい行に落ちます。私が使用していることに注意してください 20px 物を視覚的に分離するのに役立つギャップ。

移動できます <aside> の横の列に <section>:

aside {
  grid-column-start: 2;
}

そして、DevTools が現在教えてくれることは次のとおりです。

CSS Grid の Implicit Grid と Auto-Placement を探索すると、PlatoBlockchain のデータインテリジェンスが強化されます。垂直検索。あい。 — 要素は、グリッドコンテナーの XNUMX 番目と XNUMX 番目のグリッド列の線の間にあります。は XNUMX 番目のグリッド列の行から始まり、宣言していない XNUMX 番目の行で終わります。

要素を XNUMX 番目の列に配置しますが… XNUMX 番目の列がありません。変ですよね？ XNUMX 番目の列を宣言したことはありません。 <main> grid コンテナですが、ブラウザが作成してくれました! これは、私たちが見た仕様の重要な部分です。

グリッドアイテムがこれらの境界の外側に配置されると、グリッドコンテナーは暗黙的なグリッドラインをグリッドに追加することにより、暗黙的なグリッドトラックを生成します。

この強力な機能により、動的なレイアウトが可能になります。私たちが持っているだけなら <section> 要素、取得するのは XNUMX つの列だけです。しかし、追加すると <aside> 要素を追加すると、それを含む追加の列が作成されます。

配置できます <aside> 前 <section> 代わりにこのように：

aside {
  grid-column-end: -2;
}

これにより、暗黙的な列を最後に配置する前のコードとは異なり、グリッドの先頭に暗黙的な列が作成されます。

を使用して同じことをより簡単に行うことができます grid-auto-flow すべての暗黙的なトラックをフローに設定するプロパティ column 方向：

今は指定する必要はありません grid-column-start 配置する <aside> の右側の要素 <section>! 実際、いつでもそこに投入することを決定した他のグリッドアイテムは、列方向に流れ、それぞれが独自の暗黙的なグリッドトラックに配置されます。グリッド内のアイテムの数が事前にわからない状況に最適です!

とはいえ、まだ必要です grid-column-end それを左側の列に配置したい場合 <aside> 明示的な列を占有し、次に、 <section> 明示的なグリッドの外側にあり、暗黙的な列を取るように強制します。

分かってる。それは少し複雑です。このちょっとした癖をよりよく理解するために使用できる別の例を次に示します。

最初の例では、配置を指定しませんでした。この場合、ブラウザは最初に <aside> 要素はDOMで最初に来るため、明示的な列の要素。の <section>一方、ブラウザが自動的に (または暗黙的に) 作成するグリッド列に自動的に配置されます。

XNUMX 番目の例では、 <aside> 明示的なグリッドの外側の要素:

aside {
  grid-column-end: -2;
}

今はそれは問題ではありません <aside> HTML の先頭に来ます。再割り当てすることで <aside> 別の場所で、私たちは <section> 明示的な列を取るために使用できる要素。

画像グリッド

大きな画像とその横 (またはその下) にいくつかのサムネイルがある画像のグリッドで、何か違うことを試してみましょう。

XNUMX つのグリッド構成があります。しかし、何だと思いますか？私はまったくグリッドを定義していません! 私がやっていることはこれだけです：

.grid img:first-child {
  grid-area: span 3 / span 3;
}

このようなことを実行するのに XNUMX 行のコードしか必要としないのは驚くべきことです。何が起こっているのかを分析してみましょう。考えているよりも簡単であることがわかるでしょう。初めに、 grid-area は、次のプロパティを XNUMX つの宣言に結合する省略形のプロパティです。

grid-row-start
grid-row-end
grid-column-start
grid-column-end

待って！ではない grid-area 定義に使用するプロパティ名前付きエリア要素がグリッド上で開始および終了する場所の代わりに?

はい。しかし、それ以上のこともできます。についてもっとたくさん書くことができます grid-area、しかし、この特定のケースでは：

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

DevTools を開いて簡略版を展開すると、同じことがわかります。

これは、グリッド内の最初の画像要素がまたがる必要があることを意味します XNUMX列 & XNUMX行. しかし、列や行を定義していないので、ブラウザーがそれを行ってくれます。

基本的に、最初の画像を HTML に配置して、3×3 グリッドを占有します。つまり、他の画像は同じ XNUMX つの列に自動的に配置され、新しいものを指定する必要はありません。

要約すると、最初の画像は XNUMX 列と XNUMX 行のスペースを占める必要があることをブラウザーに伝えましたが、これはグリッドコンテナーの設定時に明示的に定義したことはありません。ブラウザがこれらの列と行を設定してくれました。結果として、 HTML フロー内の残りの画像は、同じ XNUMX つの列と行を使用して適切な場所に配置されます. 最初の画像は最初の行の XNUMX つの列すべてを占めるため、残りの画像は、それぞれが XNUMX つの列を含む追加の行に流れ込み、各画像は XNUMX つの列を占めます。

これらすべてが XNUMX 行の CSS でできます。それが「暗黙の」グリッドと自動配置の力です。

そのデモの XNUMX 番目のグリッド構成では、次を使用して自動フロー方向を変更しただけです。 grid-auto-flow: column 以前に配置したときと同じ方法で <aside> a の隣の要素 <section>. これにより、ブラウザは強制的に第4 残りの画像を配置するために使用できる列。 XNUMX つの行があるため、残りの画像は同じ垂直列内に配置されます。

オーバーフローせずにグリッド内に収まるように、画像にいくつかのプロパティを追加する必要があります。

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

そしてもちろん、XNUMX つの値を調整することで、グリッドを簡単に更新して、より多くの画像を考慮することができます。それは 3 大きな画像のスタイルで。これがあります：

.grid img:first-child {
  grid-area: span 3 / span 3;
}

しかし、次のように変更するだけで XNUMX 番目の列を追加できます。 4 代わりに：

.grid img:first-child {
  grid-area: span 4 / span 4;
}

さらに良いことに、それをカスタムプロパティとして設定して、更新をさらに簡単にしましょう。

動的レイアウト

サイドバーの最初の使用例は、最初の動的レイアウトでした。次に、要素の数がグリッド構成を決定する、より複雑なレイアウトに取り組みます。

この例では、ぎこちないギャップやスペースの欠落を残さずに、要素の数にうまく収まるようにグリッドが調整される XNUMX ～ XNUMX 個の要素を使用できます。

要素が XNUMX つの場合は、何もしません。要素は、グリッドによって自動的に作成された唯一の行と列を埋めるために引き伸ばされます。

XNUMX 番目の要素を追加するときに、次を使用して別の (暗黙の) 列を作成します。 grid-column-start: 2.

XNUMX 番目の要素を追加すると、XNUMX 列の幅を占める必要があります。 grid-column-start: span 2、ただし、それが :last-child XNUMX 番目の要素を追加する場合 (そしていつ追加するか)、その要素は XNUMX 列しか占有しないためです。

それを追加すると、 XNUMX つのグリッド構成 のみ XNUMXつの宣言 そして暗黙のグリッドの魔法:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

別のものを試してみましょう：

要素が XNUMX つまたは XNUMX つしかない最初と XNUMX 番目のケースでは何もしていません。ただし、XNUMX 番目の要素を追加するときは、ブラウザにそのことを伝えます — それが :last-child — XNUMX つの列にまたがる必要があります。 XNUMX 番目の要素を追加するとき、要素を XNUMX 列目に配置する必要があることをブラウザに伝えます。

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

あなたはトリックを取得し始めていますか？要素の数に基づいてブラウザーに特定の指示を与えます (使用して :nth-child) また、場合によっては、XNUMX つの命令でレイアウトが完全に変更されることがあります。

異なるコンテンツを扱う場合、サイズは同じではないことに注意してください。

項目のサイズを定義していないため、ブラウザーはコンテンツに基づいて自動的にサイズを調整し、今見たものとは異なるサイズになる可能性があります。これを克服するには、 明示的 すべての列と行が同じサイズであることを指定します。

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

ねえ、私たちはまだそれらのプロパティで遊んでいません! grid-auto-rows & grid-auto-columns グリッドコンテナー内の暗黙的な行と列のサイズをそれぞれ設定します。または、スペックそれを説明します：

　 grid-auto-columns & grid-auto-rows プロパティは、によってサイズが割り当てられていないトラックのサイズを指定します grid-template-rows or grid-template-columns.

これは、最大 XNUMX つの要素を使用できる別の例です。今回はコードを分解させていただきます。心配する必要はありません。セレクターは複雑に見えるかもしれませんが、ロジックは非常に簡単です。

要素が XNUMX つあるにもかかわらず、必要な宣言は XNUMX つだけでした。数行のコードで実現できる複雑で動的なレイアウトを想像してみてください!

何が起こっているのですか？ grid-auto-rows そして、なぜXNUMXつの値を取るのですか? XNUMX つの行を定義していますか?

いいえ、XNUMX つの行を定義しているわけではありません。しかし、我々　暗黙的な行のパターンとして XNUMX つの値を定義します。ロジックは次のとおりです。

行が XNUMX つの場合、最初の値でサイズが調整されます。
XNUMX つの行がある場合、最初の行は最初の値を取得し、XNUMX 番目の行は XNUMX 番目の値を取得します。
XNUMX つの行がある場合、XNUMX つの値が使用されます。
XNUMX つの行がある場合 (興味深いのはここにあります)、最初の XNUMX 行に XNUMX つの値を使用し、XNUMX 行目に最初の値を再利用します。これが、すべての暗黙的な行のサイズを変更するために繰り返す一種のパターンである理由です。
100 行ある場合は、XNUMX x XNUMX のサイズになります。 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, etc.

取消 grid-template-rows 行数とそのサイズを定義します。 grid-auto-rows 途中で作成される可能性がある行のサイズのみ。

例に戻ると、ロジックは、XNUMX つの行が作成されるときに同じサイズになることです (ここでは、 2fr 2fr)、しかし、XNUMX 番目の行が作成された場合は、それを少し小さくします。

グリッドパターン

この最後のものでは、パターンについて話します。 XNUMX つの列が他の列よりも幅が広く、各行がそれらの列の配置を交互にする XNUMX つの列のレイアウトを見たことがあるでしょう。

この並べ替えレイアウトは、処理しているコンテンツの量を正確に把握しないと実行が難しい場合がありますが、CSS Grid の暗黙的な自動配置機能により、比較的簡単に実行できます。

コードをのぞいてみましょう。複雑に見えるかもしれませんが、非常に単純なので、分解してみましょう。

最初に行うことは、パターンを識別することです。自問してみてください: 「パターンを繰り返す要素の数は?」この場合、XNUMX つの要素ごとに後になります。それでは、今のところ XNUMX つの要素のみを使用して見てみましょう。

それでは、グリッドを定義し、 :nth-child 要素を切り替えるためのセレクター:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

パターンは XNUMX つの要素ごとに繰り返されると述べたので、論理的に使用します。 4n + x コラボレー x 範囲は 1 から 4 です。次のようにパターンを説明すると、少し簡単になります。

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

完璧ですよね？ XNUMX つの要素があり、XNUMX 番目の要素、XNUMX 番目の要素などでパターンを繰り返します。

それらの :nth-child セレクターは扱いにくい場合があります。クリスは非常に役立つそれがどのように機能するかの説明含みますさまざまなパターンを作成するためのレシピ.

次に、次のように各要素を構成します。

最初の要素は XNUMX 列を取り、XNUMX 列目から開始する必要があります (grid-column: 1/span 2).
XNUMX 番目の要素は XNUMX 列目に配置されます (grid-column-start: 3).
XNUMX 番目の要素は XNUMX 列目に配置されます: (grid-column-start: 1).
XNUMX 番目の要素は XNUMX 列を取り、XNUMX 列目から開始します: (grid-column: 2/span 2).

これが CSS です。

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

ここでやめて終わりにすることもできますが、もっとうまくやることができます! 具体的には、いくつかの宣言を削除し、グリッドの自動配置機能に頼って作業を行うことができます。これは理解するのが最も難しい部分であり、削除できるものを特定するには多くの練習が必要です.

最初にできることは更新です grid-column: 1 /span 2 のみを使用 grid-column: span 2 デフォルトでは、ブラウザは最初の項目を最初の列に配置するためです。これを削除することもできます。

.grid :nth-child(4n + 3) { grid-column-start: 1; }

XNUMX 番目、XNUMX 番目、XNUMX 番目のアイテムを配置すると、グリッドは自動的に XNUMX 番目のアイテムを正しい場所に配置します。つまり、次のようになります。

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

でもさあ、もっとうまく散歩できるよ！これを削除することもできます。

.grid :nth-child(4n + 2) { grid-column-start: 2; }

なんで？ XNUMX 番目の要素を XNUMX 番目の列に配置し、XNUMX 列を完全に占有できるようにすると、グリッドに XNUMX 番目の暗黙の列を強制的に作成させ、明示的に指示せずに合計 XNUMX 列にすることになります。最初の項目も XNUMX 列を使用しているため、XNUMX 番目の要素は最初の行に入ることができず、次の行に流れます。この構成により、最初の行に空の列が残り、XNUMX 番目の行に空の列が残ります。

話の結末は分かっていると思います。ブラウザーは、XNUMX 番目と XNUMX 番目の項目をこれらの空の場所に自動的に配置します。したがって、コードはさらに単純になります。

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

XNUMX つの宣言を行うだけで、非常にクールで非常に柔軟なパターンを作成できます。最適化の部分は難しいかもしれませんが、慣れて練習を重ねるうちにコツがつかめます。

なぜ使わないの？ grid-template-columns 列の数がわかっているので、明示的な列を定義するには?

私たちはそれができる！そのコードは次のとおりです。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

ご覧のとおり、コードは間違いなくより直感的です。 XNUMX つの明示的なグリッド列を定義し、最初と XNUMX 番目の要素が XNUMX つの列を取る必要があることをブラウザーに伝えます。このアプローチを強くお勧めします！しかし、この記事の目的は、CSS グリッドの暗黙的な自動配置機能から得られる新しいアイデアやトリックを探ることです。

明示的なアプローチはより単純ですが、暗黙的なグリッドでは、CSS が舞台裏で追加の作業を行っているギャップを埋める必要があります (駄洒落を許してください)。最後に、暗黙的なグリッドをしっかりと理解することは、CSS グリッドアルゴリズムをよりよく理解するのに役立つと信じています。結局のところ、私たちは明らかなことを研究するためにここにいるのではありません。野生の領域を探索するためにここにいるのです!

今度はもう少し早い別のパターンを試してみましょう。

私たちのパターンは、XNUMX つの要素ごとに繰り返されます。 XNUMX 番目と XNUMX 番目の要素は、それぞれ XNUMX つの完全な行を占有する必要があります。 XNUMX 番目と XNUMX 番目の要素を配置すれば、他の要素に触れる必要がないように思われるので、次のことを試してみましょう。

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

うーん、ダメ。 XNUMX 番目の要素を最初の列に配置する必要があります。それ以外の場合、グリッドは自動的に XNUMX 番目の列に配置します。

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

良いですが、まだ作業があります。XNUMX 番目の要素を一番上に移動する必要があります。このように最初の行に配置してみるのは魅力的です:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

しかし、これは機能しません。 6n + 3 要素が同じ領域に配置され、ごちゃごちゃしたレイアウトになります。本当の解決策は、XNUMX 番目の要素の初期定義を保持し、追加することです。 grid-auto-flow: dense ギャップを埋めるために。 MDNから:

[The] 「高密度」パッキングアルゴリズムは、埋めようとします。 グリッドの前の穴に、小さなアイテムが後で出てきた場合。これにより、アイテムが順不同に見える場合があります。これを行うと、大きなアイテムによって残された穴が埋められる場合があります。省略された場合、「スパース」アルゴリズムが使用されます。配置アルゴリズムは、アイテムを配置するときにグリッド内を「前方」に移動するだけで、穴を埋めるためにバックトラックすることはありません。これにより、後のアイテムで埋められた可能性のある穴が残っていても、自動配置されたすべてのアイテムが「順番に」表示されます。

このプロパティはあまり直感的ではないことはわかっていますが、配置の問題に直面したときは決して忘れないでください。無駄に異なる構成を試す前に、それを追加してください。追加の労力なしでレイアウトを修正できる可能性があるためです。

このプロパティを常にデフォルトで追加しないのはなぜですか?

場合によっては、その動作が望ましくないため、お勧めしません。そこにある MDN の説明では、アイテムが「順不同」に流れて、より大きなアイテムによって残された穴を埋めることに言及していることに注意してください。視覚的な順序は通常、ソースの順序と同じくらい重要です。特にアクセス可能なインターフェイスに関しては、 grid-auto-flow: dense ビジュアルとソースの順序が一致しない場合があります。

最終的なコードは次のとおりです。

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

もう一つ？さあ行こう！

これについては、あまり多くを語らず、代わりに私が使用したコードの図を示します。どのようにしてそのコードにたどり着いたかを確認してください。

黒の項目は暗黙的にグリッドに配置されています。私がそこにたどり着いた方法よりも多くの方法で同じレイアウトを取得できることに注意してください。あなたもそれらを理解できますか？使用について grid-template-columns? コメント欄であなたの作品を共有してください。

最後のパターンを残します。

私は何解決策を持っているこれはあなたが練習する番です。学んだことをすべて取り入れて、これを自分でコーディングしてから、私のソリューションと比較してください。冗長なもので終わっても心配しないでください。最も重要なことは、有効な解決策を見つけることです。

もっと欲しい？

最後に、CSS Grid に関連するいくつかのスタックオーバーフローの質問を共有したいと思います。ここでまとめて説明した多くのテクニックを使用した回答を紹介します。これは、実際の使用例と現実世界の状況で、これらの機能が役立つケースがいくつあるかを示す良いリストです。

包み込む

CSS グリッドは何年も前から存在していますが、広く議論されていないあまり知られていない、使用されているトリックがまだたくさんあります。暗黙的なグリッドと自動配置機能はその XNUMX つです。

そして、はい、これは困難になる可能性があります! 暗黙的なグリッドの背後にあるロジックを理解するのに多くの時間がかかりましたが、今でも自動配置に苦労しています。明示的および暗黙的なグリッドに頭を悩ませることにもっと時間を費やしたい場合は、チェックする価値のあるいくつかの追加の説明と例を次に示します。

同様に、以下について読みたいと思うかもしれません。 grid-auto-columns CSS-Tricks Almanac で Mojtaba Seyedi が非常に詳細に説明し、動作を説明するのに役立つ信じられないほど役立つビジュアルが含まれているためです。

開始時に述べたように、ここで取り上げた方法は、グリッドを構築するために既に知っている一般的な方法を置き換えることを意図したものではありません。場合によっては役立つさまざまな方法を模索しているだけです。

タイムスタンプ： 2022 年 8 月 1 日2022 年 8 月 1 日

タイムスタンプ： 2023 年 3 月 10 日

CSS グリッドの暗黙的なグリッドと自動配置機能の探索

プラトン再発行

目次

「明示的、暗黙的？ここで一体何が起こっているのですか？

動的サイドバー

画像グリッド

動的レイアウト

グリッドパターン

もっと欲しい？

包み込む

より多くの CSSトリック

フロントエンド開発奨学金を探す

便利な速記の論理プロパティ

サーバーレス機能を備えたQRコードジェネレーターを作ろう！

ソリティアゲームのアニメーションライブラリを選択する方法

詳細はこちら

ファンシーな画像装飾: マスクと高度なホバー効果

デンバーで開催された 2022 年イベントから私が奪ったもの

新しい CSS メディアクエリの範囲構文

ファンシーな画像装飾: アウトラインと複雑なアニメーション

Grid Named Areas を使用してレイアウトを視覚化 (および参照) する

私たちに関しては

垂直検索とAi

プラットフォーム

フォロー

目次

「明示的、暗黙的？ ここで一体何が起こっているのですか？

動的サイドバー

画像グリッド

動的レイアウト

グリッドパターン

もっと欲しい？

包み込む

より多くの CSSトリック

私たちに関しては

垂直検索とAi

プラットフォーム

フォロー

「明示的、暗黙的？ここで一体何が起こっているのですか？