CSS グリッド レイアウト 正方形のセル

Question

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を使用せずにグリッドセルを正方形にする方法はありますか?

Answer 1

この正方形の アスペクト比は実際には 1x1 であり、CSS は height または width## に基づいてサイズを設定します #