CSSグリッドレイアウトとは-CSSの知識-php.cn

ホームページ

毎日のプログラミング

CSSの知識

CSSグリッドレイアウトとは

藏色散人

Nov 12, 2018 pm 05:31 PM

この記事では、CSS グリッドレイアウト 、つまり グリッドレイアウト の基礎知識を中心に紹介します。

推奨参考学習:「CSS チュートリアル」

フロントエンド初心者にとって、CSS グリッドレイアウト の概念は少し馴染みがないかもしれません。実際、それは非常に理解しやすいです。 Web ページのスタイルをレイアウトするために CSS が使用されることは誰もが知っていますが、通常、Web ページの互換性、ボックスのフローティング、配置などのハック実装の問題を最初に考慮する必要があります。CSS グリッドレイアウトとも呼ばれます。この問題を解決するために特別に作成されたモジュールです。

簡単に言えば、CSS Grid Layout は、列 (Column) と行 (Row) を同時に処理できる 2 次元のグリッドベースのレイアウトシステムです。の目標は、グリッド設計に基づいてユーザーとのインターフェース方法を変えることです。

以下では、簡単な グリッドレイアウトの例 を通じてグリッドグリッドレイアウトを紹介します。

グリッドレイアウトの簡単なコード例 は次のとおりです。 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid网格布局示例</title>
</head>
<style>
 .wrapper {
        display: grid;
 grid-template-rows: 100px 100px 100px;
 }
    .item1 {
        grid-column-start: 1;
 grid-column-end: 4;
 }
    .item1{

        background: #333333;

 }
</style>
<body>
<div class="wrapper">
    <div class="item1" style=" background: #745A74;">大导航</div>
    <div class="item2" style="background: #CCCC66">2</div>
    <div class="item3" style="background: #FFCFCF">3</div>
    <div class="item4" style="background: aquamarine">4</div>
    <div class="item5" style="background: chartreuse">5</div>
    <div class="item6" style="background: darkorange">6</div>
</div>
</body>
</html>

効果は次のとおりです: CSSグリッドレイアウトとは

上記のコードでは、指定したコンテナに display:grid 属性 を設定して、グリッドの使用を開始します。レイアウト、つまり要素を定義するグリッドコンテナーを作成し、列 (grid-template-columns) と行 (grid-template-rows) のサイズを設定し、子要素を Grid-column によってコンテナーに配置します。そしてグリッド行。

重要なプロパティの紹介:

##grid-template-rows プロパティはグリッド行の寸法に基づいており、グリッド線の名前とサイズ。

grid-template-columns プロパティはグリッド列の寸法に基づいており、グリッド線の名前とグリッドトラックのサイズを定義します。

Grid-column-start プロパティは、行、スパン、または自動を提供することによって、グリッド列内のグリッド項目の開始位置を指定します。この開始位置は、グリッド領域のブロック開始エッジを定義します。

Grid-column-end プロパティは、コントリビューションライン、スパン、またはなし (自動) をグリッド列に配置することで、グリッド列のグリッド項目の終了を指定します。グリッド位置を指定して、グリッド領域のブロックの終了エッジを指定します。

この記事は、

CSS Grid グリッドレイアウトの簡単な基礎知識を紹介するもので、困っている友人に役立つことを願っています。

以上がCSSグリッドレイアウトとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

Dreamweaver Mac版

ビジュアル Web 開発ツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。