1つの記事でグリッドレイアウトを理解する

グリッドレイアウトとは何ですか？

Gridそのレイアウトグリッドレイアウトは新しいCSSレイアウトモデルであり、1ページがいくつかの主要な領域に分割され、これらの領域のサイズ、位置、レベル、およびその他の関係を定義します。CSSプログラムのレイアウトの中で最も強力であると主張しているのは、現在、唯一のCSS2次元レイアウトです。Gridレイアウトを使用すると、次のレイアウトと同様のデモアドレスを簡単に実現できます。

グリッドレイアウトとフレックスレイアウト

レイアウトについては、レイアウトについて考えflex、レイアウトと同じくらいの数を提案しましflexたがGrid、レイアウトを知る必要はないようです。ただし、flexレイアウトとGridレイアウトには大きな違いがあります。つまりflex、レイアウトは1次元でありGrid、レイアウトは2次元レイアウトです。flexレイアウトは、一度に1つの次元、1つの行または1つの列の要素のレイアウトのみを処理できます。Gridレイアウトでは、コンテナを「行」と「列」に分割してグリッドを作成します。これらの行と列に関連する位置にグリッド要素を配置して、レイアウトの目的を達成できます。

Gridflexストロングのレイアウトよりレイアウト！

フレックスレイアウトの例：

グリッドレイアウトの例：

グリッドのいくつかの基本的な概念

グリッドを使用して小さな例を実装し、グリッドのいくつかの基本的な概念を示し、アドレスを示します

<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
</div>
复制代码

.wrapper {
  margin: 60px;
  
  display: grid;
  
  grid-template-columns: repeat(3, 200px);
  
  grid-gap: 20px;
  
  grid-template-rows: 100px 200px;
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}
复制代码

コンテナとプロジェクト：要素を宣言するdisplay：gridかdisplay：inline-grid、メッシュコンテナを作成します。これを行うと、この要素の直接の子はすべてグリッドアイテムになります。.wrapperコンテナが直接の子要素グリッドアイテムになるグリッドとしての上記の要素など。

追跡グリッド：grid-template-columnsおよびgrid-template-rows属性を使用して、行と列のグリッドを定義します。コンテナ内の水平領域は行と呼ばれ、垂直領域は列と呼ばれます。上記の図はOne、Two、Threeの組成One行は、Fourあります

グリッド単位：グリッド単位は、グリッド要素の最小単位です。概念的には、実際にはテーブルのセルに非常によく似ています。上記の図One、Two、、Three...Fourグリッド単位の一つであります

グリッド線：「グリッド線」と呼ばれる、グリッドを分割する線。グリッドを定義するときは、グリッド線ではなくグリッドトラックを定義することに注意してください。グリッドは、各グリッド要素を見つけることができるように番号付きのグリッド線を作成します。m列にはm + 1の垂直グリッド線があり、n行にはn +1と水平グリッド線があります。たとえば、上記の例では、4本の垂直グリッド線があります。一般的に、番号は左から右、上から下、1、2、3の順に並べ替えられます。もちろん、番号を右から左、下から上に、-1、-2、-3 ...の順序で並べ替えることもできます。

コンテナプロパティの概要

Gridレイアウトに関連する多くの属性と値は多くのメモリを必要とします。demo一緒に組み合わせて、サイドノックでコード側を理解し、自由な時間を使ってそれを覚えておくことをお勧めします。小さなdemoデモンストレーションになるときに各属性を紹介します。メモリを強化するために、効果の独自の外観を変更できることをお勧めします。

Gridレイアウト属性は2つのカテゴリに分類できます。1つはコンテナ属性で、もう1つはアイテム属性です。まず、コンテナのプロパティを見てみましょう

表示属性

プロパティのデモを表示する

要素のステートメントを介して、display：gridまたはdisplay：inline-gridメッシュコンテナを作成します。コンテナ要素内のライン要素をdisplay：grid条件として、船舶がブロック要素であることを宣言しdisplay: inline-gridます

.wrapper {
  display: grid;
}
复制代码

.wrapper-1 {
  display: inline-grid;
}
复制代码

grid-template-columnsプロパティとgrid-template-rowsプロパティ

grid-template-columnsおよびgrid-template-rowsプロパティのデモンストレーションアドレス

grid-template-columns列幅プロパティ、grid-template-rows高プロパティラインの設定、これら2つの属性Gridはレイアウトで特に重要であり、それらの値は多様ですが、grid-template-columnsプロパティを説明するために、それらの配置はより類似しています。

固定の列幅と行の高さ

.wrapper {
  display: grid;
  
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  
  grid-template-rows: 50px 50px;
}
复制代码

上記は、固定の列幅が200px 100px 200pxで、行の高さが50px50pxであることを意味します

repeat（）関数：繰り返される値を単純化できます。この関数は2つのパラメーターを受け入れます。最初のパラメーターは繰り返しの数であり、2番目のパラメーターは繰り返される値です。たとえば、上記の行の高さはすべて同じです。これを実現できます。実際の効果はまったく同じです。

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}
复制代码

自動入力キーワード：自動入力を示し、行（または列）にできるだけ多くのセルを収容できるようにします。grid-template-columns: repeat(auto-fill, 200px)列幅が200ピクセルであることを示しますが、列数は固定されていません。ブラウザがそれに対応できる限り、要素を配置できます。コードと効果を次の図に示します。

.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

frキーワード：Gridレイアウトには、柔軟なグリッドトラックの作成に役立つ追加の長さの単位も導入されています。fr単位は、グリッドコンテナ内の使用可能なスペースの等しい部分を表します。grid-template-columns: 200px 1fr 2fr最初の列の幅が200pxに設定され、残りの幅が2つの部分に分割されていることを示します。幅は、それぞれ残りの幅の1/3と2/3です。コードと効果を次の図に示します。

.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

minmax（）関数：グリッド要素に最小サイズと最大サイズを指定したい場合があります。このminmax()関数は長さの範囲を生成します。これは、この範囲内で長さをグリッドプロジェクトに適用できることを意味します。最小と最大の2つのパラメーターを受け入れます。grid-template-columns: 1fr 1fr minmax(300px, 2fr)3番目の列の幅が少なくとも300pxであることを意味しますが、最大値は1番目と2番目の列の幅の2倍を超えることはできません。コードと効果は次のとおりです。

.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

自動キーワード：長さはブラウザによって決定されます。autoキーワードにより、3列または2列のレイアウトを簡単に実現できます。grid-template-columns: 100px auto 100px1列目と3列目が100pxで、長さがブラウザによって決定されることを示します。コードと効果は次のとおりです。

.wrapper-5 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

grid-row-gapプロパティ、grid-column-gapプロパティ、およびgrid-gapプロパティ

grid-row-gap属性、grid-column-gap属性、およびgrid-gap属性のデモンストレーションアドレス

grid-row-gap属性とgrid-column-gap属性は、それぞれ行間隔と列間隔を設定します。grid-gap属性は両方の短縮形です。

grid-row-gap: 10px行間隔が10pxでgrid-column-gap: 20px、列間隔が20pxであることを示します。grid-gap: 10px 20px達成される効果は同じです

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-auto-rows: 50px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}
复制代码

上記の2つの書き込み方法は同じ効果があります。

グリッド-テンプレート-エリア

grid-areaおよびgrid-template-areasデモアドレス

grid-template-areas 属性はエリアを定義するために使用され、エリアは1つ以上のセルで構成されます

一般メッシュ要素grid-areaが一緒に使用されるこのプロパティは、一緒に紹介するためにここにあります。grid-area属性は、アイテムが配置される領域を指定します

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}
复制代码

上記のコードは6つに分割されて.おり、空のセルを表す記号に注意する価値があります。つまり、セルは使用されていません。

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}
复制代码

上記のコードは、クラス.sidebar .content .header要素がgrid-template-areas定義されたsidebar content header領域の上にあることを示しています

grid-auto-flowプロパティ

grid-auto-flowプロパティのデモアドレス

grid-auto-flow属性は、自動レイアウトアルゴリズムの動作を制御し、グリッドに自動的に配置される要素がどのように配置されるかを正確に指定します。デフォルトの順序は、図の英数字で、すなわち配列、二行目が始まるその後に、すなわち最初の行を埋めるために、「最初の行」に配置されone、two、three.... grid-auto-flowプロパティによる順序によって、デフォルト値はになりrowます。

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

注意深い生徒は問題を見つけたかもしれません。つまり、5番目の項目と6番目の項目の間にギャップがあります（下の図を参照）。これは、6番目のブロックの長さが空白の長さよりも長いためです。そしてそれは底に絞られました。1つの線によって引き起こされました。実際のアプリケーションでは、この空白を適切な長さで埋めるために、次の長さが必要になる場合があります。この時間はgrid-auto-flow: row dense、可能な限りフォームを埋めるように設定できます。コードと効果は次のとおりです。

.wrapper-2 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row dense;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

これはgrid-auto-flow: column、最初の列の後に行が続くことを示すように設定できます。コードと効果を次の図に示します。

.wrapper-1 {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows:  50px 50px;
}
复制代码

justify-items属性、align-items属性、place-items属性

Justify-items属性、align-items属性のデモンストレーションアドレス

justify-itemsプロパティはセルコンテンツの水平位置（左、中央、右）をalign-items設定し、プロパティはセルの垂直位置（上、中央、下）を設定します。

以下では、説明する例としてjustify-items属性を取り上げます。align-items属性は同じですが、方向は垂直です。それらはすべて次の属性を持っています。

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
复制代码

コードの実装と効果は次のとおりです。

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-items: start;
}
.wrapper-1 {
  justify-items: end;
}
.wrapper-2 {
  justify-items: center;
}
.wrapper-3 {
  justify-items: stretch;
}
复制代码

開始：セルの開始エッジを揃えます

end：セルの端の端を揃えます

中央：セルの内側を中央に配置します

ストレッチ：セルの幅全体を占めるようにストレッチします（デフォルト値）

justify-content属性、align-content属性、およびplace-content属性

Justify-content属性、align-content属性のデモアドレス

justify-content属性は、コンテナ内のコンテンツ領域全体（左、中央、右）の水平位置であり、align-content属性は、コンテンツ領域全体（上、中央、下）の垂直位置です。それらはすべて次の属性値を持っています。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
复制代码

justify-content説明する例としての次のプロパティでは、align-content属性同様に、方向のみが垂直方向です。

start-コンテナの開始境界を揃えます
コンテナの端の境界をend-align
center-コンテナの中心

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-content: start;
}
.wrapper-1 {
  justify-content: end;
}
.wrapper-2 {
  justify-content: center;
}
复制代码

space-around-各アイテムの両側のスペースは同じです。したがって、アイテム間のスペースは、アイテムとコンテナの境界間のスペースの2倍になります。
space-between-アイテムとアイテムの間のスペースは等しく、アイテムとコンテナの境界の間にスペースはありません
スペース-均等-アイテムとアイテムの間のスペースは等しく、アイテムとコンテナの境界の間のスペースは同じ長さです
ストレッチ-アイテムサイズが指定されていない場合、ストレッチはグリッドコンテナ全体を占めます

.wrapper-3 {
  justify-content: space-around;
}
.wrapper-4 {
  justify-content: space-between;
}
.wrapper-5 {
  justify-content: space-evenly;
}
.wrapper-6 {
  justify-content: stretch;
}
复制代码

grid-auto-columnsプロパティとgrid-auto-rowsプロパティ

grid-auto-columnsプロパティとgrid-auto-rowsプロパティのデモアドレス

grid-auto-columnsプロパティとgrid-auto-rows以前のプロパティについて話し、暗黙的および表示グリッドの概念を見てください

暗黙的およびグリッドを表示：明示的に含まれているグリッドgrid-template-columnsとgrid-template-rows行と列の属性が定義されています。グリッド定義の外に何かを配置した場合、またはコンテンツの量のためにより多くのグリッドトラックが必要な場合、グリッドは暗黙のグリッドに行と列を作成します

追加のグリッド（つまり、上記の暗黙的なグリッド）の場合、その列の幅と行の高さは、grid-auto-columnsプロパティとgrid-auto-rowsプロパティの設定になります。そして彼らの言い回しgrid-template-columnsとgrid-template-rows同じ。これらの2つの属性を指定しない場合、ブラウザはセルのコンテンツのサイズに完全に基づいて新しいグリッドの列幅と行高さを決定します

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px;

  grid-template-rows: 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

grid-template-columns属性とgrid-template-rows属性は2つの行と2つの列のみを指定しますが、実際には9つの要素があり、暗黙のグリッドがあります。することでgrid-auto-rows、グリッド線の暗黙的には50px高さを指定することが

プロジェクト属性の紹介

grid-column-startプロパティ、grid-column-endプロパティ、grid-row-startプロパティ、grid-row-endプロパティ

デモアドレス

グリッドアイテムが配置されている4つの境界線と、配置するグリッド線をそれぞれ指定して、アイテムの位置を指定できます。

grid-column-startプロパティ：左側の境界線が配置されている垂直グリッド線
grid-column-endプロパティ：右の境界線が配置されている垂直グリッド線
grid-row-startプロパティ：上部の境界線が配置されている水平グリッド線
grid-row-endプロパティ：下の境界線が配置されている水平グリッド線

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #19CAAD;
}
.two { 
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  
  z-index: 1;
  background: #8CC7B5;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #D1BA74;
}
.four {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #BEE7E9;
}
.five {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #E6CEAC;
}
.six {
  grid-column: 3;
  grid-row: 4;
  background: #ECAD9E;
}
复制代码

上記のコードでは、クラス.twoグリッドプロジェクトが配置されています。垂直グリッド線は2から4で、水平グリッド線は1から2です。それらの中で、それは.three競合します（垂直グリッド線は3から4であり、水平グリッド線は1から4です）。あなたはz-index彼らの階層を決定するために設定することができます

グリッドエリアプロパティ

grid-area属性は、上記の紹介でgrid-template-areas言及されている場合、特定の拡張がなくなった地域のプロジェクトを指定します。特定の参照を使用すると、アドレスが示される場合があります。

grid-areaおよびgrid-template-areasプロパティのデモアドレス

justify-self属性、align-self属性、place-self属性

justify-self属性/ align-self属性/ place-self属性のデモアドレス

justify-self水平位置（左、右）のセルコンテンツのjustify-itemsプロパティ。プロパティの使用はまったく同じですが、単一のプロジェクトにのみ作用します。

align-self このプロパティは、セルコンテンツの垂直位置（上、中、下）を設定します。これは、align-itemsプロパティの使用法とまったく同じであり、単一のアイテムにのみ影響します。

どちらも非常に似ており、ここではjustify-self属性表示align-self属性のみを取ります同様に、垂直方向にのみ作用します

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
复制代码

.item {
  justify-self: start;
}
.item-1 {
  justify-self: end;
}
.item-2 {
  justify-self: center;
}
.item-3 {
  justify-self: stretch;
}
复制代码

開始：セルの開始エッジを揃えます

end：セルの端の端を揃えます

中央：セルの内側を中央に配置します
ストレッチ：セルの幅全体を占めるようにストレッチします（デフォルト値）

グリッドの実際の戦闘-レスポンシブレイアウトの実現

上記の紹介の後、グリッドが非常に強力であることが誰もが理解できると思います。中央揃え、2列のレイアウト、3列のレイアウトなど、いくつかの一般的なCSSレイアウトは簡単に実装できます。グリッドレイアウトがレスポンシブレイアウトを実装する方法を見てみましょう

frは等しい除算応答を実現します

frコンテナの使用可能なスペースを必要な数の等分割スペースに分割できる等分割ユニット。この機能を使用すると、均等に分割された応答を簡単に実装できます。grid-template-columns: 1fr 1fr 1frコンテナが3つの等しい部分に分割されていることを示します

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

繰り返し+自動調整-列幅を固定し、列数を変更します

レイアウトは簡単に実現できるGridように、アリコートレイアウトだけがレイアウトではありませんflex。その後、より高度なレスポンシブを検討してください。

上記の例は常に3列ですが、グリッドで列の幅を固定し、コンテナーの幅に応じて列の数を変更できるようにすることがよくあります。今回は、上記のrepeat()機能とauto-fitキーワードを使用できます。grid-template-columns: repeat(auto-fit, 200px)固定列幅が200pxで、数値が適応可能であることを示します。収容できる限り、上向きに配置されます。コードと効果は次のように実装されます。

デモアドレス

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

繰り返し+自動適合+ミニマックスは右側の空白を削除します

上で見た効果では、通常、右側に空白があります。これは、私たちが見たくないものです。列の幅も特定の範囲内で適応できると便利です。minmax()この関数は、これを行うのに役立ちます。このgrid-template-columns: repeat(auto-fit, 200px)変更grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))は、予備のアリコートが一緒にある場合、列幅が少なくとも200pxであることを示しています。コードと効果は次のとおりです。

デモアドレス

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

繰り返し+自動適合+ minmax-span-denseは空室の問題を解決します

すべてが順調に進んでいるように見えますが、ある日UIではspan、スパンを実行してグリッドプロジェクトのキーワードを設定し、grid-column-start: span 33つのグリッドプロジェクトのスパンを示すことで、各グリッド要素の長さが同じにならない場合があります。具体的なコードと効果は次のとおりです。

.item-3 {
  grid-column-start: span 3;
}
复制代码

デモアドレス

いいえ、なぜ右側に空白があるのですか？オリジナルの長さが長すぎて手放せないものがありますが、今回はdenseキープレイに。grid-auto-flow: row dense空白を残さずに可能な限り埋める手段、コードと効果は次のとおりです。

.wrapper, .wrapper-1 {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  grid-auto-flow: row dense;
}
复制代码

グリッドレイアウトの互換性

最後に、Grid互換性の問題のレイアウトについて説明します。caniuseでは、次のような結果が得られます。全体的な互換性も良好ですが、IE10以下ではサポートされていません。個人的な提案は会社の内部システムで使用するのに問題ではありませんが、目次は今のところ適切ではないかもしれません