フロントエンドレイアウトのグリッドグリッドレイアウト（シンプルでわかりやすい）

グリッドグリッドレイアウト

序文

フレキシブルレイアウトについての記事はたくさんありますが、一次元レイアウトを解くもので、二次元的には弱いようです。現時点では、グリッドレイアウトを使用する必要があります。（追記：1次元は1列または1行のレイアウトです。9つの正方形のボックスのレイアウトに遭遇した場合、列と行が関係する場合、それは2次元のレイアウトであり、製品の表示で一般的に使用されます。 eコマースのWebサイトで）;この記事を読んでください。自分でhtmlを作成し、それに従って理解しやすくすることをお勧めします。

なぜグリッドレイアウトを使用するのですか？

多くの学生は、フローティング、ポジショニング、フレックスボックスモデルを使用して、ほとんどのスタイルレイアウトを実現できると考えるかもしれませんが、なぜ新しいグリッドレイアウトを学ぶ必要があるのですか？以前にjqueryを使用したのと同じように、後でmvvmフレームワークを使用したのはなぜですか。これにより、より効率的に実装でき、メンテナンスにも非常に役立ちます。

テーマを入力してください：

最も基本的なコード:(グリッドの最初の利点であるalign-items:center垂直方向のセンタリングを体験してください。お母さんは、垂直方向のセンタリングができなくなることを心配することはありません。）

<style>
  .box {
     
     
    width: 300px;
    display: grid;
    align-items:center;
  }
  .box>div{
     
     
    background: gray;
    text-align: center;
    font-size: 24px;
    border: 2px solid white;
  }
</style>

<div class="box">      
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>    
</div>

1.列と行

1）上記の.box内側のスタイルを変更します：（3列と2行）

.box {
    
    
    width: 300px;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
  }

解説：

• grid-template-columns列を作成することです。上の図に示すように、行の幅は100pxで、3つの100px、つまり3つの列を記述しました。これは非常に単純です。
• grid-template-rows設立ラインです。上の図に示すように、行の高さは50pxで、2 50pxと記述しました。これは、2行を意味します。

2）fr属性を使用しますが、それでも.box属のみを変更します。

.box {
    
    
    width: 300px;
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    /*grid-template-columns: repeat(3, 1fr) 50px; 隐藏方法repeat，代表循环创建*/
    /*grid-template-columns: repeat(3, 1fr) 50px; 隐藏方法minmax(100px, auto)，第一个参数是最小值，第二个参数是最大值*/
    grid-template-rows: 1fr 2fr;
  }

わかりますか？frは均等配分の比率を表します。コンソールを開くと、列の1、2、および3要素がそれぞれ50px、100px、および150pxであり、行も1つの部分と2つの部分に分割されていることがわかります。 、ただし、自動的に垂直中央に配置されるため、上端と下端に空白があります。

3）難しいこと（グリッド上にアイテム（子要素）を配置する）は、
混乱を避けるためにdomとcssを書き直します。

<style>
  .box {
    
    
    width: 300px;
    display: grid;
    align-items:center;
    /* justify-items: center;*/
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
  }
  .box>div{
    
    
    padding: 30px 0;
    background: gray;
    text-align: center;
    font-size: 24px;
    border: 2px solid white;
  }
</style>

<div class="box">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

9つの正方形のボックスを取得し、6つの正方形を埋めると、他の3つは空になります。

まず、疑問を説明します。なぜそれを使用しpadding、それでも使用するのかtext-align: center、コメントしたものはjustify-items: center水平方向のセンタリングも実現できます。その理由はgird、センタリングはテキストではなく、あなたのためですdiv。padding値がなく、背景画像を塗りつぶすことができません。自分で試してみると、理解できます。

---

二、グリッド-列-開始和グリッド-列-終了

• 重要な点について話すために：私たちはItem1にスタイルを与えます：

.item1 {
    
    
    grid-column-start: 1;
    grid-column-end: 4;
}

少し恥ずかしいですか、どんな状況ですか、私に聞いてください、あなたはそう思うでしょう。旧宮ボックスのグリッド列は1〜9で、grid-column-startは、開始する場所が最初のボックスであることを意味し、grid-column-endは、終了する場所が4番目のボックスであることを意味します（実際には、4番目のボックスの前にあります）End）なので、実際には1〜3はitem1で占められており、次のボックスは自動的に延期されます。自分で属性を変更してみてください。そうすれば理解できます。

---

3、グリッドギャップ

.boxスタイルのみを変更する

.box {
    
    
    width: 300px;
    display: grid;
    align-items:center;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
  }

マップしないと、グリッドアイテム間にギャップが追加されることがわかります。使い方が簡単で、前にギャップを追加し、マージンを使用すると、非常に言葉が出なくなり、対処が難しくなります。これはとても簡単です。grid-column-gapとgrid-row-gapは、それぞれ列と行の間のグリッドギャップを変更します。

---

4.実際の戦闘（下の図に示すような効果を達成するため：伝説的な12グリッドシステム）

.boxスタイルのみを変更する

<style>
  .box {
    
    
    display: grid; 
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
    grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";
  }
  .header {
    
    
    grid-area: h;
    background: greenyellow;
  }
  .menu {
    
    
    grid-area: m;
    background: blue;
  }
  .content {
    
    
    grid-area: c;
    background: coral;
  }
  .footer {
    
    
    grid-area: f;
    background: purple;
  }
  .box>div{
    
    
    font-size: 24px;
    text-align: center;
  }
</style>

 <div class="box">      
     <div class="header">header</div>
     <div class="menu">menu</div>
     <div class="content">content</div>
     <div class="footer">footer</div>   
 </div>

ここでの唯一の新しい属性はgrid-template-areasです。これは、一見すると少しめまいがします。注意深く話す：

• 1.grid-template-columns: repeat(12, 1fr);最初にカラムに12グリッドシステムを作成します。
• 2.grid-template-rows: 50px 350px 50px;高さの異なる行をさらに3つ作成します。フォーム3 * 12 = 36セル。
• 3.grid-template-areasこれらの36個のセルを均等に分割します。これがマーキングです。hはヘッダー、mはメニュー、cはコンテンツ、fはフッターを表します。上記の文章がたまたま36株に分割されているのをgrid-area見て、サブスタイルの対応で自社ブランドを見つけました。実際、理解するのは難しいことではありません。

---

拡張機能：レスポンシブマルチメディアクエリと連携して、これ@media screenまで実現が困難だったさまざまな効果を実現します。girdは、構造とパフォーマンスの分離を真に実現します。これは、css時代の大きな進歩です。