CSS を使用して組積造レイアウトを構築する方法

石積みレイアウトとは何ですか?

石積みレイアウトとは、さまざまなサイズのアイテムを隙間が不均等にならないように配置することです。通常、アイテムがグリッド ビューにある場合、アイテムは行方向、列方向、またはその両方に配置されます。しかし、石積みのレイアウトでは、行または列に短い要素がある場合でも、次の要素がスペースを占有します。

組積造レイアウトを実現するにはどうすればよいですか?

これを実現するには多くの方法がありますが、最良の方法の 1 つはgrid-template-columns使用し、 repeat()関数を使用することです。それでは始めましょう。

Grid grid-template-columnsプロパティ

明示的な列のサイズ変更に加えて、CSS グリッドの最も価値があり実用的な側面の 1 つは、列がいっぱいになるまで繰り返し、列に項目を自動的に配置できる機能です。特に、グリッドに必要な列の数を指定し、それらの列の応答性をブラウザーに制御させるオプションを使用すると、ビューポート サイズが小さい場合には表示される列が減り、画面の幅が大きくなるにつれて表示される列が増えます。

これは、repeat() 関数と自動配置キーワードを使用して実現されます。要約すると、 repeat()関数を使用すると、必要なだけ列を繰り返すことができます。たとえば、12 列のグリッドを作成している場合は、次のように記述できます。

 .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }

1frディレクティブを使用すると、ブラウザーは列間で利用可能なスペースを分割し、各列が均等に分配されるように指示されます。つまり、その大きさに関係なく、この例のグリッドには常に 12 列があります。ただし、小さなビューポートではコンテンツが圧迫されすぎるため、これでは十分ではありません。

したがって、列が狭くなりすぎないように、列の最小幅を指定する必要があります。これは、 minmax()関数を使用して行うことができます。

 grid-template-columns: repeat(12, minmax(300px, 1fr));

ただし、 CSSグリッドの機能により、行がオーバーフローします。列を行ごとに 12 回繰り返すようにブラウザに明示的に指示しているため、ビューポートの幅が小さすぎて新しい最小幅要件にすべてを適合できない場合でも、列は新しい行に折り返されません。

ラッピングを実現するには、 auto-fitまたはauto-fillキーワードを使用できます。

 grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

これらのキーワードを使用することで、要素の折り返しと列のサイズ変更を処理するようにブラウザに指示し、そうでなければオーバーフローする要素が行に折り返されるようにします。

グリッドは次のようになります。

しかし、これは石積みのレイアウトではありません。では、どうすればそれを達成できるのでしょうか?どれどれ。

グリッドgrid-columnプロパティとgrid-rowプロパティ

grid-columnプロパティとgrid-rowプロパティは、グリッド レイアウト内のグリッド項目のサイズと位置を指定します。したがって、グリッド内の単一のグリッド項目の幅または高さを指定できます。そのためには、 spanキーワードを使用できます。

最初のグリッド項目の幅を広げるには、次のように記述できます。

 .grid-item: nth-child(1) { grid-column: span 2; grid-row: span 1; }

したがって、最初のグリッド セルは 2 列にまたがり、次のような外観になります。

同様に、2 番目のグリッド項目の高さを増やしたい場合は、次のように記述できます。

 .grid-item: nth-child(2) { grid-column: span 1; grid-row: span 2; }

したがって、2 番目のグリッド セルは 2 行にまたがり、次のような外観になります。

同様に、すべてのグリッド項目を希望の方法で拡張すると、次の結果が得られます。

ただし、グリッド項目の数が多すぎる場合、各グリッド項目の正確な高さと幅を指定することはできません。したがって、代わりに値を動的に割り当てることができます。

 .grid-item: nth-child(7n+1) { grid-column: span 2; grid-row: span 1; } .grid-item: nth-child(7n+2) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+4) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+5) { grid-column: span 3; grid-row: span 1; }

そして出力は次のとおりです。

しかし、これで十分でしょうか？いくつかの視点を加えて、次のレベルに引き上げてみましょう。

これは、perspective() を追加し、transform() プロパティを使用することで実現できます。

 .active { transform: perspective(18cm) rotate(20deg); transform-style: preserve-3d; transform-origin: left; }

さらに、選択するとグリッドを通常のグリッドから遠近感のあるグリッドに切り替えるメニュー バーがあります。そのために JavaScript を使用できます。

 menu.onclick=()=>{ grid.classList.toggle('active'); }

そして最終的な出力は次のようになります。

この記事は気に入りましたか?以下のコメント欄でお知らせください。

データ視覚化のための最も汎用性の高い JavaScript ソリューションはどれなのか知りたいですか?ここをお読みください: https://techvariable.com/blogs/the-most-versatile-js-solution-to-data-visualization-d3-js/