CSS Grid-Layout をベースとしてダッシュボード風のビューを作成したいと考えています。画面の全長に 16 列を配置したいと考えています (応答性があるはずです)。セルを正方形にするには、セルの高さをセルの幅によって決定する必要があります。問題は、一部のセルを複数のセルにまたがりたいことです。たとえば、2x1 セルを占める要素が必要です。

基本的なグリッド レイアウトができました。

.grid-container { 表示: グリッド; グリッド テンプレート列:repeat(16, 1fr); グリッド自動行: var(--tile-unit); ギャップ: var(--tile-gap); 整列内容: 開始; } .grid-item { 背景: ライトグレー; 境界半径: 10px; }

複数の列または行にまたがる要素のクラスもあります。

.width-unit-2 { グリッド列終了: スパン 2; } .高さの単位-2 { グリッド行端: スパン 2; }

今度は要素のアスペクト比を使用してみます。これは 2x1 要素の場合は正常に機能しますが、2x2 要素が必要な場合は、対応するクラスでアスペクト比を定義するだけでは済みません。この場合は別のクラスを定義する必要があります。

aspect-ratioを使用せずにグリッドセルを正方形にする方法はありますか?