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

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

藏色散人

リリース： 2021-01-11 11:21:19

オリジナル

6623 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。