基本的な紹介 前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう 1 つの強力な機能であるグリッドについてお話ししましょう。 グリッドはフロントエンド開発者にとって非常に馴染みのあるものです。中国語では「グリッド」と翻訳されます。ブートストラップ、セマンティック UI、および Ant Design を使用したことがある人は、グリッド レイアウトに精通しているはずです。これまで、CSS フレームワークのグリッド レイアウトは、通常、フロートとパーセンテージ幅を使用して実装されていました。この実装には、いくつかの欠点があります。
もちろん、グリッドは flex でも実装できますが、float を使用するよりもそれほど簡単ではありません。また、flex は 1 次元空間のレイアウトには適していますが、グリッドのような 2 次元空間には適していません。現在、CSS3 は仕様と標準レベルからグリッドを実装しており、プログラミング エクスペリエンスが大幅に向上しています。 互換性 使用法 グリッドは、複数の列と行で構成される 2 次元のグリッド システムです。 1. コラム (1)列を設定する CSS3 のグリッドは任意の数の列に分割でき、各列の幅も任意に設定できます。簡単な例を見てみましょう: html: <div id="コンテンツ"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> css: 体{ 色: #fff; テキスト配置: 中央; } #コンテンツ{ 表示: グリッド; グリッドテンプレート列: 33.3% 33.3% 33.3%; 最大幅: 960px; マージン: 0 自動; } #コンテンツ div{ 背景: ライトグレー; パディング: 30px; } #コンテンツ div:n番目の子(偶数){ 背景: スカイブルー; } 効果: 列の数と幅を任意に変更することもできます。例: #コンテンツ{ グリッドテンプレート列: 10% 20% 30% 40%; } 効果: (2)fr(分数) CSS3 では、中国語で「分数」を意味する新しい単位 FR (分数) が導入されました。これは、パーセンテージの代わりに使用されます。パーセンテージ (小数) は割り切れないため、分数を使用すると、小数点以下の桁数を複数記述する必要がなくなります。たとえば、同じ幅の 3 つの列を持つグリッドは次のように表すことができます。 グリッドテンプレートの列: 1fr 1fr 1fr; (3)繰り返す また、列または行の書き込みを簡素化するために、 グリッドテンプレート列: repeat(3, 1fr); 多数の列を定義する必要がある場合、repeat は非常に便利です。たとえば、等幅の列が 10 個あるグリッドを定義する場合、 2. 列を作る (1)行を設定する 列を設定すると、要素の改行により行が自動的に生成されますが、行の数と高さを設定することもできます。 CS: ... #コンテンツ{ 表示: グリッド; グリッドテンプレート列: repeat(3, 1fr); グリッドテンプレートの行: repeat(4, 60px); 最大幅: 960px; } 効果: 4 行目にはコンテンツはありませんが、行は存在し、そのスペースを占有していることがわかります。 (2)ミニマックス 上記の例では、行に固定の高さを指定していますが、グリッド項目に多くのコンテンツが含まれている場合、以下に示すように、高さが固定されているためコンテンツの一部が表示されず、問題が発生します。 この問題を解決するために、CSS は CS: ... グリッド自動行: minmax(60px, auto); // または grid-template-rows: repeat(3, minmax(60px, auto)); 効果: (3)グリッドギャップ 行と列の間に間隔を追加したい場合は、既成の方法もあります。 css: グリッドギャップ:{ 10ピクセル; } 効果: 3. グリッド線 上記のすべての例では、グリッド内の各グリッド項目はデフォルトの順序で配置されています。レイアウトを再配置し、グリッド項目の位置やサイズを変更したい場合はどうすればよいでしょうか?この目的のために、グリッド ラインの概念が導入されます。いわゆるグリッド ラインは、グリッドをいくつかの等しい部分に分割した後の分割線です。下の図で 1 から 8 まで番号が付けられた水平線と垂直線がグリッド ラインです。 <img src="http://lc-jOYHMCEn.cn-n1.lcfi...;/> グリッドアイテムの開始グリッドラインと終了グリッドラインを定義することで、グリッドアイテムの位置とカバー領域を制御できます。簡単な例: html: <div id="コンテンツ"> <div class="one">1</div> </div> css: #コンテンツ { 表示: グリッド; グリッドテンプレートの列: repeat(8, 100px); グリッドテンプレートの行: repeat(8, 100px); グリッドギャップ: 10px; } 。1つ { グリッド列開始: 3; グリッド列の終了: 6; グリッド行開始: 3; グリッド行の終了: 6; } 効果: 。1つ { グリッド列: 3 / 6; グリッド行: 3 / 6; } // または .one { グリッドエリア: 3 / 3 / 6 / 6; } グリッド項目の開始グリッド ラインがデフォルトの場合は、そのスパンを設定するだけです。 。1つ{ グリッド列: スパン 3; グリッド行: スパン 3; } 4. グリッドエリアテンプレート グリッド ラインによるレイアウトに加えて、CSS3 では、グリッド エリア テンプレートというより強力なレイアウト方法も提供されます。グリッド エリア テンプレートとは何かを説明するのではなく、コードを見てみましょう。 html: <div id="コンテンツ"> <header>ヘッダー</header> <main>メイン</main> <section>セクション</section> <aside>余談</aside> <nav>ナビゲーション</nav> <footer>フッター</footer> </div> css: 体 { 色: #fff; テキスト配置: 中央; } #コンテンツ { 表示: グリッド; グリッドテンプレートの列: repeat(4, 1fr); グリッド自動行: minmax(100px, auto); 最大幅: 960px; マージン: 0 自動; グリッドギャップ: 10px; グリッドテンプレート領域: 「ヘッダー ヘッダー ヘッダー ヘッダー」 「余談。メインメイン」 「nav . main main」 「セクション セクション セクション セクション」 「セクション セクション セクション セクション」 「フッター フッター フッター フッター」; } #コンテンツ>* { 背景: #3bbced; パディング: 30px; } ヘッダー { グリッドエリア: ヘッダー; } メイン { グリッドエリア: main; } セクション{ グリッドエリア: セクション; } 脇に { グリッドエリア: 脇に; } nav { グリッドエリア: nav; } フッター { グリッドエリア: フッター; } 効果: わかりますか?重要なポイントは、グリッド コンテナーの グリッド エリア テンプレートを使用する利点は、レスポンシブ レイアウトを実装する場合にも明らかです。画面サイズごとに異なるグリッド エリア テンプレートを作成するだけで済みます。 5. 両端揃えと整列 flex と同様に、grid でも justify と align を設定して、グリッド項目の水平方向と垂直方向の配置を調整できます。グリッド コンテナーまたは個々のグリッド項目の設定もサポートします。 グリッドコンテナを設定する html: <div id="コンテンツ"> <div class="one">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> css: #コンテンツ { 表示: グリッド; グリッドテンプレート列: repeat(3, 1fr); グリッドテンプレートの行: repeat(2, minmax(120px, auto)); グリッドギャップ: 10px; 最大幅: 960px; アイテムの位置を揃える: 開始; 項目の揃え方: 終了; } 効果: 注意: flex は グリッド項目を設定する CS: ... 。1つ{ align-self: 開始; 正当化-自己: 終了; } 効果: 練習する 上記の知識があれば、CSS3 グリッドを使用してさまざまなレイアウト効果をすばやく作成できます。以下に、いくつかの簡単な codepen の例を示します。 12列のグリッドレイアウト 花びらのレイアウト レスポンシブレイアウト 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します
js 配列はどこでも使用されているため、おそらく誰もがよく知っているでしょうが、配列クラス (疑似配...
この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...
仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...
Dockerデスクトップをインストールするダウンロード先: Docker Desktop for M...
場合によっては、Windows システム上のプログラムを Linux 上でリモートで実行する必要があ...
一般的に、データ テーブル内の列を ID 列として設定すると、ID 列の表示値を手動で ID 列に挿...
mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...
以下では、SQL クエリ ステートメントを使用して、Mysql データベース内のテーブルのテーブル名...
リレーショナル データベースでは、悲観的ロックと楽観的ロックがリソース同時実行シナリオのソリューショ...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
1. 背景Sysbench は、システムのハードウェア パフォーマンスをテストできるストレス テスト...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できる...
目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...
昨日、VMware に CentOS7 をインストールしました。Tomcat パッケージを転送するた...