プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明

序文

CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネスニーズを満たすために CSS グリッドを自分でカスタマイズする必要がある場合もあります。この記事では、プロジェクトでの CSS グリッドシステムの柔軟な使用について説明します。

必要

UI は、左上のオレンジ色の部分が固定され、青色の部分が動的にレンダリングされる次のようなレイアウトで設計されています。これらは、前面から背面に表示されます。ブロックが 1 つある場合は 1 つ表示され、2 つある場合は 2 つ表示されます。データが 6 個を超える場合、余分なデータは下の 4 つの列に表示されます。

分析する

図からわかるように、グリッドには 3 列グリッドと 4 列グリッドの 2 種類があります。バックエンドインターフェイスがデータを返す場合、js は判断を行う必要があります。データが 6 より大きい場合、最初の 6 個は配列 A に配置され、配列 A のデータは 3 列のグリッドに表示されます。残りの部分は配列 B に配置され、配列 B のデータは 4 列のグリッドに表示されます。

HTML部分

<div id="アプリ">
  <div class="grid-container">
    <div style="幅: 25%; 高さ: 220px; フロート: 左; 背景色: #FF6600; "></div>
    <div class="row" style="width: 75%; float: right;">
      <div class="col-3" v-for="(item, index) in groupListCol3" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
    <div class="row" style="width: 100%;">
      <div class="col-4" v-for="(item, index) in groupListCol4" :key="index">
        <div class="groups-cell">{{item.name}}</div>
      </div>
    </div>
  </div>
</div>

CSS部分

.グリッドコンテナ{
      幅: 100%;
    }
    .グリッドコンテナ *{
      ボックスのサイズ: 境界線ボックス;
    }

    .grid-container .row:before、
    .grid-container .row:after {
      コンテンツ： "";
      表示: テーブル;
      クリア: 両方;
    }

    .grid-container [クラス*='col-'] {
      フロート: 左;
      最小高さ: 1px;
      /*-- ガター --*/
      パディング: 0 0 20px 20px;
    }
    .グリッドコンテナ .col-3{
      幅: 33.33%;
      高さ: 120px;
    }
    .グリッドコンテナ .グループセル {
      背景色: #66d3ff;
      高さ: 100px;
    }
    .grid-container .col-4 {
      幅: 25%;
      高さ: 120px;
    }
    .grid-container .col-4:n番目の子(4n+1) {
      パディング: 0 0px 20px 0px;
    }

注: 4 列のグリッドでは、各行の最初のセルには padding-left は必要ないため、最終的に.col-4:nth-child(4n+1)の値を設定する必要があります。

js部分

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<スクリプト>
  新しいVue({
    el: '#app',
    データ： {
      グループリスト列3: [],
      グループリスト列4: []
    },
    作成された（）{
      リスト = [
        {名前: 'A'},
        {名前: 'B'},
        {名前: 'C'},
        {名前: 'D'},
        {名前: 'E'},
        {名前: 'F'},
        {名前: 'G'},
        {名前: 'H'},
        {名前: '私'},
        {名前: 'J'},
        {名前: 'K'},
        {名前: 'L'}
      ]
      リストの長さが6より大きい場合
        this.groupListCol3 = リスト.スライス(0, 6)
        this.groupListCol4 = リスト.スライス(6)
      } それ以外 {
        this.groupListCol3 = リスト
      }
    }
  })
</スクリプト>

まとめ

この記事では、CSS グリッドの原理を説明するのではなく、CSS グリッドシステムを使用して特定のビジネス上の問題に対するソリューションを提供する方法について説明します。グリッドシステムの原理については、この外国人によって詳細に記述されている参考セクションを参照してください。

参照する

独自の CSS グリッドシステムを作成する

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: W3C チュートリアル (7): W3C XSL アクティビティ

>>: vue3+ts+EsLint+Prettier 標準コード実装