Grid-template-columns プロパティは CSS Grid のほんの一部にすぎません。このプロパティを具体的に理解するには、まず CSS グリッドとは何かを理解する必要があります。
作業を高速化するために、グリッド レイアウトは基本的にグリッド ベースのレイアウト システムを提供します。ページまたはテンプレートをデザインするには、float: right; のようなものを使用する代わりに、行と列を使用できます。この記事では、CSS のグリッド テンプレート列について調べて、その概要と最適な使用方法を理解します。はじめましょう！
グリッド テンプレート列とは何ですか?
簡単に言えば、grid-template-columns は、グリッド レイアウト内の列の数とその列の幅を指定するプロパティです。このプロパティの値はスペースで区切られ、各値はそれぞれの列のサイズを指定します。
グリッド テンプレート列: 自動 自動 自動; グリッド テンプレート列: 自動 自動; グリッド テンプレート列: 20% 20% 20% 20%;
上の行は、grid-template-columns の使用方法の基本的なデモンストレーションです。それらの 3 つの自動区切り値は、同じ幅の 3 つの列を表します。次の 2 つは auto 値にも適用されます。「このアカウントは WhatsApp の使用を許可されていません」問題を修正する方法4 つの 20% 値については、列の幅は親要素の 20% になります。
構文は非常に単純ですが、パーセントと自動以外にも多くの値があります。次のコードを考えてみましょう。
グリッド テンプレート列: none|auto|max-content|min-content|length|initial|inherit;
パイプで区切られた各値は、grid-template-columns プロパティで使用できる値です。それぞれに独自の目的があります。これについては、この記事の後半で説明します。
このプロパティはアニメーション化可能であることを理解することも重要です。Grid-template-columns はアニメーションやトランジションに使用できます。つまり、列がある値から別の値に徐々に変化する可能性があります。
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
表示: グリッド;
グリッド テンプレート列: 自動 自動 自動;
グリッドギャップ: 10px;
背景色: 黒;
パディング: 10px;
アニメーション: mymove 5s 無限。
境界半径: 2vw;
}
.grid
-container > div {
背景色: 白;
テキスト整列: 中央;
パディング: 20px 0;
フォントサイズ: 30px;
境界半径: 1.5vw;
}
@keyframes
mymove {
20% {グリッド テンプレート列: 自動}
40% {グリッド テンプレート列: 自動自動}
50% {グリッド テンプレート列: 自動自動自動;}
60% {グリッド テンプレートの列: 自動 自動}
80% {grid-template-columns: auto}
}
</style>
</head>
<body>
<h1>
grid-template-columns プロパティのアニメーション</h1>
<p>
アニメーションにより数値が変更されます列を 1 から 3 に移動してから 1 に戻り、最後に元の 4 に戻ります。繰り返し</p>
<
div class="grid-container">
<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 class=" item7">7</div>
<div class="item8">8</div>
</div>
</div>
</body>
</html>
これは、Google マップ (デスクトップおよびモバイル) で距離を測定する方法の簡単なデモンストレーションであり、このプロパティをアニメーションやトランジションに使用する方法を示しています。
価値観を理解する
次の行に戻りましょう。
グリッド テンプレート列: none|auto|max-content|min-content|length|initial|inherit;
レイアウト内の列で何が起こっているかを理解できるように、各値を見ていきます。まず、initial と継承を取得します。これは、この特定のプロパティにとってはそれほど興味深いものではないためです。このinitialは、grid-template-columnsプロパティをそのデフォルト値に設定するだけで、この場合はnoneです。このinheritvalueは基本的に、プロパティが親要素に持つ値を継承します。
none は、必要に応じて列を生成するためのデフォルト値であり、幅はコンテナのサイズと列内のコンテンツのサイズに基づいて評価されます。
max-content は、列内の最大の項目に基づいて列の幅を調整します。min-content は、列内の最小の項目に基づいて列の幅を調整します。length は、指定された値を列の幅に設定します。
以下のコードを単純な HTML として使用し、Windows で「Spotify は現在このコンテンツを再生できません」エラーを修正する方法を示し、プロパティの各値の CSS を調整します。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>grid-template-columns プロパティ</h1>
<div id="test-div">
<div class="item1">最初</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>
</body>
</html>
なし
それまでは何もなく、明確なグリッドもありませんでした。基本的に、列のサイズは全幅になるか、別のプロパティ Grid-auto-columns によって決定されます。Android および iPhone で Google マップのタイムラインを確認する方法以下のコードは、none 属性とそれが出力でどのように動作するかを示しています。
body {
背景色:白;
パディング: 10vw;
#
test-div {
高さ:自動;
表示: グリッド;
境界半径: 1vw;
ギャップ: 1vw;
背景色: 黒;
パディング: 1vw;
グリッド テンプレート列: なし。
#
test-div div {
背景色:白;
テキスト整列: 中央;
パディング: 20px 0;
フォントサイズ: 30px;
境界半径: 0.5vw;
}
出力は次のとおりです。
自動
属性の値として auto を指定すると、幅全体が列数で除算されます。それぞれの幅は同じです。以下のコードでは、grid-template-columns プロパティで auto が 3 回使用されていることに注意してください。したがって、同じ幅の列が 3 つあることになります。
body {
背景色:白;
パディング: 10vw;
#
test-div {
高さ:自動;
表示: グリッド;
境界半径: 1vw;
ギャップ: 1vw;
背景色: 黒;
パディング: 1vw;
グリッド テンプレート列: 自動 自動 自動;
#
test-div div {
背景色:白;
テキスト整列: 中央;
パディング: 20px 0;
フォントサイズ: 30px;
境界半径: 0.5vw;
}
出力は次のとおりです。
auto 値を使用すると、もう少し深くすることができます。このプロパティに他の値がある場合 (たとえば、grid-template-columns: auto 3px auto 50px;)、UI には 4 つの列が表示されます。1 番目の幅は 3 番目と同じですが、2 番目と 4 番目の幅は一意に指定されます。これで、auto が利用可能なスペースをすべて取得し、そのスペースをその値を持つ列に均等に分配することがわかります。
最大コンテンツ
max-content は最大のコンテンツの幅を使用するため、HTML を少し調整する必要があります。以下のコードは、ランダムなコンテンツを含む 6 つの異なる div を示しています。前の例と同様に、grid-template-columns プロパティによって取得する列の数が決まります。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>grid-template-columns プロパティ</h1>
<div id="test-div">
<div class="item1">最初</div>
<div class="item2">2 番目</div>
<div class="item3">何とか何とか何とか</div>
< div class="item4">4 番目</div>
<div class="item5">5 番目</div>
<div class="item6">6 番目</div>
</div>
</body>
</html>
このコードでは、grid-template-columns: max-content max-content max-content; の結果、3 つの列が作成されます。つまり、値が同じであっても、列の幅は div 内のコンテンツのスパンによって決まります。したがって、内部のコンテンツによって div の幅が決まります。
body {
背景色:白;
パディング: 10vw;
#
test-div {
高さ:自動;
表示: グリッド;
境界半径: 1vw;
ギャップ: 1vw;
背景色: 黒;
パディング: 1vw;
グリッド テンプレート列: 最大コンテンツ 最大コンテンツ 最大コンテンツ;
#
test-div div {
背景色:白;
テキスト整列: 中央;
パディング: 20px 0;
フォントサイズ: 30px;
境界半径: 0.5vw;
}
出力は次のとおりです。
何とか何とか何とかが最大のコンテンツであるため、それが 3 つの列の幅を決定することに注意してください。同じ概念が min-content 値にも当てはまります。ただし、問題は、オーバーフローが発生することです。
長さ
長さは文字通りの長さを意味するものではありません。興味深いメモ - 貴重なチュートリアルを共有してください! length は基本的に CSS で指定された実際の値を表します。これらには、使用する可能性のあるすべての CSS ユニットが含まれており、vw、rem、em、fr などを使用するかどうかに関係なく、すべて適用されます。定義された各列の値は UI に反映されます。
body {
背景色:白;
パディング: 10vw;
#
test-div {
高さ:自動;
表示: グリッド;
境界半径: 1vw;
ギャップ: 1vw;
背景色: 黒;
パディング: 1vw;
グリッド テンプレート列: 10vw 25vw 40vw;
#
test-div div {
背景色:白;
テキスト整列: 中央;
パディング: 20px 0;
フォントサイズ: 30px;
境界半径: 0.5vw;
}
上記のコードでは、最初の列の幅が 10vw、2 番目の列の幅が 25vw、3 番目の列の幅が 40vw になります。出力は次のようになります。
これらの値を一緒に使用することも、一律に使用することもできます。デザイナーには自由があります。時間をかけてこれらの価値観を試してみて、楽しむことを忘れないでください。
一般化する
この記事の冒頭で述べたように、グリッド テンプレート列はグリッド システム全体の 1 つの側面にすぎません。この記事では、none、auto、max-content、min-content、および length の値の使用方法を学びました。
これに興味がある場合は、gridCSS の display: 行に付属するものすべてを詳しく見てみることができます。可能性は無限大。コーディングを楽しんでください!