大根に水をまくグリッドガーデン
Grid Garden Watering Radish
レベル1
CSSコードを書くことでニンジンガーデンを植えることができるグリッドガーデンへようこそ！ grid-column-start属性を使用して、ニンジンに水をまきます。
たとえば、grid-column-start：3は、3番目の列のグリッドの先頭の領域に水を供給します。これは、グリッドの左から3番目の列の境界を表す別の方法です。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column-start: 3 } レベル2
おっと、あなたの庭の隅にいくつかの雑草があるようです。 grid-column-startを使用して雑草を取り除きます。雑草は5番目のグリッド列から始まることに注意してください。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #poison { grid-column-start: 5 } レベル3
grid-column-startのみを使用する場合、グリッドはデフォルトで1列のみを占有します。ただし、grid-column-end属性を使用して、グリッドを複数の列に拡張できます。
grid-column-endを使用してすべてのニンジンに水をやりますが、土地に水をかけないでください。水を節約しましょう！ニンジンは最初の列で始まり、4番目の列が終わることに注意してください。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column-start: 1 grid-column-end:4 } レベル4
grid-column-startをgrid-column-endとともに使用すると、終了値が開始値よりも大きいことに気付いたかもしれません。しかし、そうではないことが判明しました！
ニンジンに水をやるには、grid-column-endの値を5未満に設定してみてください。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column-start: 5 grid-column-end:2 } レベル5
左からの数ではなく、グリッドからの列の数をカウントする場合は、grid-column-startとgrid-column-endを負の値に設定できます。たとえば、-1に設定して、右側の最初の列を指定できます。
grid-column-endを負の値に設定してみてください
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column-start: 1 grid-column-end:-2 } レベル6
次に、grid-column-startを負の値に設定してみてください。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #poison { grid-column-start:-3 } レベル7
グリッドの開始と終了に基づいてグリッドアイテムを定義できます。 spanキーワードを使用して、スパンする幅を指定することもできます。スパンは正の値のみであることに注意してください。
たとえば、これらのニンジンにgrid-column-end：span2で水をまくことができます。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column-start: 2 grid-column-end: span 2 } レベル8
grid-column-end属性でspanキーワードを使用して、ニンジンに水をまきます。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column-start: 1 grid-column-end:span 5 } レベル9
また、grid-column-startでspanキーワードを使用して、終了位置を基準にした幅を設定することもできます。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column-start:3 grid-column-end: 6 } レベル10
毎回grid-column-startとgrid-column-endの2つの属性を入力すると、退屈します。幸い、grid-columnは、「/」で区切られている限り、一度に2つの値を受け入れる省略形です。
次に例を示します。grid-column：2/4は、2番目の列から4番目の列の終わりまでのグリッド項目を設定します。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column:4/6 } レベル11
にんじんに水をやるのにグリッドカラムを使ってみてください。 spanキーワードもこの省略形で使用できるので、試してみることができます。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column:2/5 } レベル12
CSSグリッドレイアウトとフレックスボックスレイアウトが異なる点の1つは、グリッドアイテムを行と列の2次元空間に簡単に配置できることです。 Grid-row-startは、垂直方向の開始位置を指定することを除いて、grid-column-startと同じです。
グリッドロースタートでニンジンに水をまきます！
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-row-start:3 } レベル13
これで、省略形属性grid-rowを試すことができます。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-row:3/6 } レベル14
また、grid-columnとgrid-rowを使用して、行と列のグリッド項目の位置を設定します。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #poison { grid-column:2 grid-row:5 } レベル15
grid-columnとgrid-rowを一緒に使用して、グリッドのより広い領域を定義することもできます。試してみる！
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column:2/6 grid-row:1/6 } レベル16
grid-columnとgrid-rowを同時に入力するのが難しいと思われる場合は、別の省略形があります。 grid-area属性は、「/」で区切られた4つの値（grid-row-start、grid-column-start、grid-row-end、最後にgrid-column-end）を受け入れます。
例を以下に示します。grid-area：1/1/3/6。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-area:1/2/4/6 } レベル17
グリッドアイテムがたくさんある場合はどうなりますか？あなたは心配することなくそれらを上書きすることができます。 grid-areaを使用して、水を含まないすべてのニンジンに水をまくための2番目のグリッドアイテムを定義します。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } #water-1 { grid-area: 1 / 4 / 6 / 5 } #water-2 { grid-area:2/3/5/6 } レベル18
グリッド項目がgrid-area、grid-column、grid-rowなどに表示されていない場合、それらはソースプログラムで表示される場所に自動的に配置されます。同様に、order属性を使用して順序を書き換えることもできます。これは、テーブルレイアウトに対するグリッドレイアウトの利点の1つです。
デフォルトでは、すべてのグリッド項目の順序は0ですが、z-indexのように、順序を正または負の数に任意に設定することもできます。
さて、ニンジンの2列目が毒され、最後の列の雑草にも水が与えられているのを見ました。次に、ポイズニングされたグリッドアイテムの順序の値を変更して、それらを修正します。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } .water { order: 0 } #poison { order:1 } レベル19
水と毒地が交互になり、すべての雑草が各列の先頭に表示されます。それらを修正するために毒された土地の正しい注文値を設定してください！
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: 20% 20% 20% 20% 20% } .water { order: 0 } .poison { order:-1 } レベル20
これまでのところ、庭を5列に設定しました。各列は、幅5行全体の20％を占め、各行は高さ全体の20％を占めています。
これは、grid-template-columns：20％20％20％20％20％およびgrid-template-rows：20％20％20％20％20％を設定することによって行われます。各ルールには5つの値があり、5つの列の作成を表します。 、それぞれが庭の幅の20％に設定されます。
ただし、グリッドアイテムの幅を任意に設定することもできます。ニンジンに水をやるには、grid-template-columnsに新しい値を設定してください。最初の列の幅を50％に設定します。
#garden { display: grid grid-template-columns:50% grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column: 1 grid-row: 1 } レベル21
同じ幅のグリッドアイテムを指定するのは面倒な場合があります。幸いなことに、私たちを助けるための繰り返し機能があります。
たとえば、grid-template-columnsを使用する前は：20％20％20％20％20％属性は5つの列を定義し、各列は20％を占めます。これは次のように省略できます：grid-template-columns：repeat（5、20％）
grid-template-columns属性とrepeat関数を使用して、それぞれ幅が12.5％の8つの列を作成します。このようにあなたは庭にあまり多くの水を注ぐことはありません。
#garden { display: grid grid-template-columns:repeat(8, 12.5%) grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-column: 1 grid-row: 1 } レベル22
Grid-template-columnsは、パーセンテージ値だけでなく、ピクセルやemsなどの長さの単位も受け入れます。異なる長さの単位を混在させることもできます。
次に、列の幅をそれぞれ100px、3em、40％に設定します。
#garden { display: grid grid-template-columns:100px 3em 40% grid-template-rows: 20% 20% 20% 20% 20% } レベル23
グリッドシステムはまた、分数frの新しいユニットを導入します。各frユニットには、使用可能なスペースが割り当てられます。たとえば、2つの要素がそれぞれ1frと3frに設定されている場合、スペースは4に均等に分散され、最初の要素は1/4を占め、2番目の要素は3/4を占めます。
ここでは、雑草は最初の列の左側の1/6を占め、ニンジンは残りの5/6を占めます。 2つの列を作成し、fr単位を使用してそれらの幅を定義します。
#garden { display: grid grid-template-columns:1fr 5fr grid-template-rows: 20% 20% 20% 20% 20% } レベル24
列の幅がピクセル、パーセンテージ、またはemの単位の場合、fr単位を使用して設定された他の列は、残りのスペースを均等に分割します。
ここのニンジンは左側に50ピクセルの列を形成し、雑草も右側に50ピクセルの幅を占めます。 grid-template-columns属性を使用してこれらの2つの列を作成し、frを使用してさらに3つの列を作成して、平均して残りのスペースを構成します。
#garden { display: grid grid-template-columns:50px 1fr 1fr 1fr 50px grid-template-rows: 20% 20% 20% 20% 20% } #water { grid-area: 1 / 1 / 6 / 2 } #poison { grid-area: 1 / 5 / 6 / 6 } レベル25
今、あなたの庭の左側に幅75ピクセルを占める雑草の列があります。残りのスペースの残りの3/5はニンジンを育てており、残りの2/5はすでに雑草です。
grid-template-columns属性を使用して、px単位とfr単位を組み合わせて、必要な列を作成します。
#garden { display: grid grid-template-columns:75px 3fr 2fr grid-template-rows: 100% } レベル26
grid-template-rowsとgrid-template-columnsの役割はほぼ同じです。
grid-template-rowsプロパティを使用して、上位50ピクセルを除く庭のすべての領域に水をまきます。注：水は5行目のみを満たすように設定されているため、合計5行を作成する必要があります。
#garden { display: grid grid-template-columns: 20% 20% 20% 20% 20% grid-template-rows: repeat(4, 12.5px) 1fr } #water { grid-column: 1 / 6 grid-row: 5 / 6 } レベル27
Grid-templateは、grid-template-rowsおよびgrid-template-columnsの略語です。
たとえば、grid-template：50％50％/ 200pxは、2行のグリッドを作成します。各行は50％を占め、幅は200ピクセルの列です。
庭の上部の60％と左側の200ピクセルを含む、水に対するgrid-template属性を使用してみてください。
#garden { display: grid grid-template: 60% 40%/200px } #water { grid-column: 1 grid-row: 1 } レベル28
あなたの庭は素晴らしく見えます。これで、庭の下部に50ピクセルのパスがあり、もう1つのスペースはニンジンの栽培に使用されます。
残念ながら、ニンジンの20％は生い茂っていて、最後にCSSグリッドレイアウトで庭を計画したときです！
#garden { display: grid grid-template:1fr 50px/20% 80% }