ほんっとにはじめてのHTML5とCSS3：【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ

【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ

最終更新日：2021年09月30日　（初回投稿日：2021年04月03日）

これまでは主に Gridコンテナ側でグリッドを切る指定をしました。
今回は Gridアイテム側に指定して、アイテムの位置を決める方法を使ってみよう。

grid-rowプロパティと grid-columnプロパティは、ラインの番号やライン名などを使ってGridアイテムを置く位置を決めるプロパティです。
セルを複数またがらせてアイテムを配置することもできます。

本日のINDEX

グリッドレイアウト関連のプロパティは、下記のように記事を分けます。

【62-1】Grid Layout の grid-template-rows, grid-template-columns
（ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )
【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ
【62-3】セルやエリアを一括指定する grid-templateショートハンド
【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ　←今日はココ
【62-5】アイテム側の位置指定を一括する grid-areaショートハンド
【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ
【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns
【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる
【62-9】Grid Layout での order, position-absolute, z-index, margin
（ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う

参考：
・CSS Grid Layout Module Level 2 | W3C Editor's Draft
・CSS グリッドレイアウト | MDN

自動配置と固定配置について

grid-row と grid-column はアイテムの配置を指定します。
アイテムには、自動配置と固定配置があるということを念頭に置いておこう。

自動配置

アイテムは特に何も指定しなくても自動で流し込まれるのが基本です。
これが自動配置。
【62-1】Grid Layout の grid-template-rows, grid-template-columns でも、単に Grid を作っただけで、アイテムが勝手に流し込まれた、アレです。

自動配置は、grid-auto-flowプロパティで制御されます。
（このプロパティはまだ記事にしていません。【62-6】でまとめる予定です）

親要素にグリッドを切ったら、もうその瞬間から grid-auto-flowプロパティの値がデフォルトの row になっているので、アイテムは横方向に自動配置されるんです。

※ grid-auto-flowプロパティは、タテ方向に自動配置したり、「すき間」を埋めながら自動配置することもできます。詳しくは後日♪

固定配置

固定配置とは、アイテム要素に位置指定をして、置く場所を固定すること。
ライン番号などを使って、アイテムを置くエリアをきっちり限定します。
その指定ができるのが、今回の grid-row と grid-column なんです。

【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ では、エリア名を使ってアイテムを置く位置を決めましたね。あれも固定配置です。

ページ全体のフォーマットを作る場合は、エリア指定のように全アイテムを固定配置したほうがうまくいきます。
一方、元々ある自動配置も利用して、ピンポイントで固定配置するやり方のほうが便利な場合もあると思います。

自動配置にしたいんなら、grid-row と grid-column を使わなきゃ良いんですが、それだと 1セル1エリア にしかならない。
grid-row と grid-column は、セルを複数まとめてエリアにする機能もあります。
このエリア拡張の機能を使いながら、その他の部分は自動配置にできると便利ですよね。
今回はそれをやってみよう。

grid-row, grid-columnプロパティの値

ということで、grid-rowプロパティと grid-columnプロパティの値です。

grid-rowプロパティ　grid-columnプロパティ
キーワード	auto がデフォルト値。・アイテムを自動配置する。・または、既定値「1」をとる。
CSS構文	<grid-line> [ / <grid-line> ]? 「始まり側のライン / 終わり側のライン」という形で書く。 1セルが1エリアの場合は「/」以下を省略可能。 <grid-line> = <custom-ident> \| [ <integer> && <custom-ident>? ] \| [ span && [ <integer> \|\| <custom-ident> ] ]
グローバル値	inherit 親の値を継承 initial 継承した親の値を解消しデフォルト値に戻す unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	グリッドアイテムまたはグリッドコンテナを基準にする絶対配置ボックス

構文がややこしいですが、これはいろんな指定の仕方があるってこと。
順に説明していきます。

grid-row, grid-column の固定配置の基本

grid-rowプロパティは、アイテムの 行（row）での位置を指定します。
grid-columnプロパティは、カラム（column）での位置を指定します。

どちらも　始まり側　/　終わり側　と書くのが基本形です。

値が1個の場合（ /（スラッシュ）と「終わり側」を省略した場合）のルールがあります。
・「始まり側」が文字列（ライン名やエリア名）なら、「終わり側」も同じものに
・「始まり側」がそれ↑以外なら、「終わり側」は auto になる

「ライン番号」で位置を指定する

まず基本は「ライン番号」でアイテムを置く位置を決める方法。

ラインとはセルを区切る線で、ぜんぶに番号が決まっています。

Gridコンテナの左上端を起点にして、下方向（行数）に1、2、3、4....というライン、
右方向（カラム数）に1、2、3、4....と続くラインがあります。
ラインは「1」から始まります。ライン 0 は無いので要注意。

このライン番号を使って、こんなかんじで書くのが一番単純な書き方。
grid-row: 1 / 3;
（↑ 行（row）の始まり側ライン1 / 終わり側ライン3 = タテに2セルですね）
grid-column: 1 / 2;
（↑ カラム（column）の始まり側ライン1 / 終わり側ライン2 = 横に1セル）

指定したラインとラインの間が エリアになるんです。

ではさっそく使ってみよう。
HTMLはこんなかんじで、

<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

こんなレイアウトを作ってみます。

grid-row と grid-columnで指定をすると、CSSはこうなります。

.container{
  border:1px solid#ccc;
  display: grid;  /*グリッドを宣言*/
  grid-template: repeat(2, 80px) / repeat(3, 1fr); /*コンテナ側でセル作成*/
  }	
.container div:nth-child(1) { /*最初のdiv (文字Aが入ってるdiv)*/
  grid-row: 1 / 3;    /*1つ目のエリアの行はライン1〜3の範囲*/
  grid-column: 1 / 2; /*カラムはライン1〜2の範囲*/
  background:#fcf;
  }
.container div:nth-child(2) { /*2番目のdiv (文字Bが入ってるdiv)*/
  grid-row: 1 / 2;    /*2つ目のエリアの行はライン1〜2の範囲*/
  grid-column: 2 / 4; /*カラムはライン2〜4の範囲*/
  background:#ffc;
  }
.container div:nth-child(3) { /*3番目のdiv (文字Cが入ってるdiv)*/
  grid-row: 2 / 3;    /*3つ目のエリアの行はライン2〜3の範囲*/
  grid-column: 2 / 3; /*カラムはライン2〜3の範囲*/
  background:#cfc;
  }
.container div:nth-child(4) { /*4番目のdiv (文字Dが入ってるdiv)*/
  grid-row: 2 / 3;    /*4つ目のエリアの行はライン2〜3の範囲*/
  grid-column: 3 / 4; /*カラムはライン3〜4の範囲*/
  background:#eee;
  }

「span」で複数のセルをまたがらせる

キーワード span と組み合わせて使うこともできます。

エリアの終わり側（ /の後）で span を使うと、またがるセルの数（ラインの本数）を指定することになります。
例えば「 / span 2 」と書けば、そこから2本目のラインまでスパン（2つのセルにまたがる）という意味。

span と数字の間には必ず「半角スペース」を入れます。
キーワードだから「span2」などと他の文字がくっつくと違うモノになってエラーに。

先程のCSSを span を加えて書き直すとこうなります。

.container div:nth-child(1) {
  grid-row: 1 / span 2;    /*2つにまたがる*/
  grid-column: 1 / span 1; /*1つにまたがる*/
  }
.container div:nth-child(2) {
  grid-row: 1 / span 1;
  grid-column: 2 / span 2;
  }
.container div:nth-child(3) {
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
  }
.container div:nth-child(4) {
  grid-row: 2 / span 1;
  grid-column: 3 / span 1;
  }

全部「 span　2 」と書いていますが、逆の「 2　span 」でもOK。同じ結果です。
span と数字は「順不同」です。

1セルが1エリアなら / 以下を省略できる

またがるセルの数が1個だけなら、/以下（終わり側）を省略できます。
これは / auto と同じになり、auto の既定値「1（1セル分）」になるから。

/ span 1 の場合や、例えば grid-row: 1 / 2; とか grid-column: 2 / 3; など、始まり側と終わり側の間が1セルだったら、/ 以下を省略できる。始まり側のラインだけでOK。

先程のCSSはこうなります。

.container div:nth-child(1) {
  grid-row: 1 / span 2;    /*2つにまたがる*/
  grid-column: 1;
  }
.container div:nth-child(2) {
  grid-row: 1;
  grid-column: 2 / span 2; /*2つにまたがる*/
  }
.container div:nth-child(3) {
  grid-row: 2;
  grid-column: 2;
  }
.container div:nth-child(4) {
  grid-row: 2;
  grid-column: 3;
  }

「ライン名」で位置を指定する

値の CSS構文で <custom-ident> がありますが、これは CSSデータ型で任意の文字列。ということでラインの名前を任意につけて使えます。
半角英数字記号で好きな名前を付けられます。

注意点は " " とか ' ' とか [ ] で囲まないこと。
それから最初の文字が数字やハイフン (-) なのもダメ。
あと、span とか auto とかキーワードと同じのもダメ。

で、サンプルGrid に、こんなライン名を付けます。

CSSはこのような書き方になります。
ライン名はコンテナ側で grid-templateプロパティで指定します（3〜4行）

.container{
  display:grid;
  grid-template: [top-start] 80px [second] 80px [end] 　　 /*行（row）の指定*/
               / [a-start] 1fr [b] 1fr [third] 1fr [end];　/*カラム（column）の指定*/
  }
.container div:nth-child(1) {
  grid-row: top-start / span 2;
  grid-column: a-start;
  }
.container div:nth-child(2) {
  grid-row: top-start;
  grid-column: b / span 2;
  }
.container div:nth-child(3) {
  grid-row: second;
  grid-column: b;
  }
.container div:nth-child(4) {
  grid-row: second;
  grid-column: third;
  }

プレビューはこちら。ライン名でも意図どおりにレイアウトできています。

「エリア名」で位置を指定する

【62-2】エリアに名前をつけて配置する grid-template-areasプロパティで、エリア名で指定する方法をやりましたね。
あのときはアイテム側のエリア指定は grid-areaプロパティを使いました。

今回の grid-row と grid-columnプロパティでも「エリア名」で配置ができます。

が、grid-areaプロパティを使うほうがず〜っと簡単なので、それ１択ですけどね。
今回の grid-row と grid-columnプロパティでも「エリア名」で配置ができる件は、たぶん使わないけど「豆知識」として見ておいてください。
（grid-areaプロパティは次回記事にまとめます）

grid-template-areasプロパティで「エリア名」を指定したら（4〜5行）、
grid-row と grid-columnプロパティで値を全部その「エリア名」に指定します。

.container{
  display: grid;
  grid-template: repeat(2, 80px) / repeat(3, 1fr);
  grid-template-areas:
      "areaA areaB areaB"
	  "areaA areaC areaD";
  }	
.container div:nth-child(1) {
  grid-row: areaA / areaA;
  grid-column: areaA / areaA;
  }
.container div:nth-child(2) {
  grid-row: areaB / areaB;
  grid-column: areaB / areaB;
  }
.container div:nth-child(3) {
  grid-row: areaC / areaC;
  grid-column: areaC / areaC;
  }
.container div:nth-child(4) {
  grid-row: areaD / areaD;
  grid-column: areaD / areaD;
  }

プレビューです。

ちょっと余談ですが、
スパンする箇所だけ、始まり側も終わり側も「エリア名」にし、それ以外は auto なので略して書くことも出来ます。

.container div:nth-child(1) {
  grid-row: areaA / areaA; /*行だけスパンしているので*/
  }
.container div:nth-child(2) {
  grid-column: areaB / areaB; /*カラムだけスパンしているので*/
  }
.container div:nth-child(3) {
  grid-row: areaC; /*1セルでいいので、行の始まりだけ確定でOK*/
  }
.container div:nth-child(4) {
  grid-row: areaD; /*1セルでいいので、行の始まりだけ確定でOK*/
  }

マイナスのライン番号もあります（最後から数えたほうが早いときに）

ライン番号には、Gridコンテナの右下端を起点にしたマイナスの番号も使えます。

これは、行数やカラム数が多くて最後からカウントしたほうが早い場合には便利かも。
例えば、grid-row: 1 / -1 と書けば、行の一番最初のラインから一番最後のラインまで全部エリア指定できます。
たくさん行数があっても一発で指定できて便利ですよね。

注意点は、ライン番号のカウントが逆方向になったとはいえ、セルの指定は上から下・左から右なのは変らないことです。

このサンプルは、HTMLでは一番最初にあるアイテムAを一番下に固定しました。

CSSはこちら。

.container {
  box-sizing:border-box;
  border:1px solid#ccc;
  padding:0;
  display: grid;
  grid-template: repeat(4, 50px) / repeat(3, 1fr);  /*4行・3カラムの指定*/
  }	
.container div:nth-child(2n) {background:#ffc}   /*偶数番目のアイテムの色指定*/
.container div:nth-child(2n+1) {background:#cfc} /*奇数番目のアイテムの色指定*/
.container div:nth-child(1) {  /*最初のアイテム（A）の指定*/
  grid-row: -2;  /*行の始まりは -2。終わり側は省略してるからauto*/
  grid-column: span 3;  /*3カラム分スパン*/
  background:olive;
  color:white;
  }

上の CSSで、アイテムAの位置を「grid-row: -2」としてます（11行目）
なんで「grid-row: -1」じゃないのか？と思いますよね。

ライン番号はマイナスを付けて逆方向からカウントするのですが、指定するときのカウント順は相変わらず上から下・左から右なんです。ややこしいですね。

この場合、
rowの始まり側のライン番号は「-2」
rowの終わり側のライン番号は「-1」
というわけ。
省略せずに書くと「grid-row: -2 / -1 」となります。

「auto」の既定値「1」は「セル数1」

「1セル1エリアなら / 以下を省略できる」のところでもチラッとやりましたが、
auto の既定値「1」について、もうちょっと詳しく知っておこう。

1行・8カラムのコンテナで説明していきます。
カラムのライン名を、左端から a b c...を3回繰り返して付けます。
番号はもともと1〜9までついてます

HTMLはこちら。アイテムを1つだけ用意して配置します。

<div class="sample">
  <div> <!--このアイテム1コだけ--> </div>
</div>

CSSでこのように、ライン名を明記してカラムを8分割します。

.sample{
  box-sizing:border-box;
  border:1px solid#ccc;
  padding:0;
  margin:.5em 0;
  display: grid;
  grid-template: 80px 
                 / [a] 12.5% [b] 12.5% [c] 12.5% [a] 12.5% [b] 12.5% [c] 12.5% [a] 12.5% [b] 12.5% [c];
  }

まず、アイテムに grid-column: auto / auto と指定すると、

.sample{
  box-sizing:border-box;
  border:1px solid#ccc;
  padding:0;
  margin:.5em 0;
  display: grid;
  grid-template: 80px 
                 / [a] 12.5% [b] 12.5% [c] 12.5% [a] 12.5% [b] 12.5% [c] 12.5% [a] 12.5% [b] 12.5% [c];
  }
.sample div {
  grid-column: auto / auto;
  background:#fcf;
  }

アイテムは先頭に1セル分のエリアを占めます。これはわりと想定内ですね。

始まり側は、先頭に自動配置されました。アイテムが1コしか無いし最初の子なので。
終わり側は、auto が既定値「1」をとり、セル1個分にされました。
これは、grid-column: auto と書いても、まったく書かない全省略でも同じです。

アイテムに grid-column: auto / cと指定してみます。
今度は 始まり側が auto です。

.sample div {
  grid-column: auto / c;
  background:#fcf;
  }

c はライン名。3つありましたが、この場合は左から数えて最初の c になります。
プレビューは、2〜3のライン間がエリアになりました。

これは始まり側が auto でもauto が既定値「1」をとる例です。
終わり側は「最初の c」に限定されているので、それが基準になります。
そこから開始側に auto の既定値「1」= セル1個分がエリアになったんです。

始まり側が auto の場合、
・終わり側が「限定」されていたら、auto は既定値「1」
・終わり側が「限定されてない（auto か span）」なら、auto は自動配置
ということです。

grid-row, grid-column で自動配置する

grid-rowと grid-columnで自動配置にするには、
・auto値のみ
・span値のみ
の2パターンがあります。

autoのみで自動配置

これまでさんざん出てきましたが、1セル1エリアで良いアイテムなら、
grid-row: auto / auto;
grid-column: auto / auto;
にすればOK。

明確な基準（ライン番号やライン名）で指定されていなければ自動配置となり、HTMLソース順に並べてくれます。
（これは、grid-auto-flowプロパティのデフォルト値 row が効いているからですね）

auto / auto は、終わり側を略して auto にしても同じ意味。
そしてコレはデフォルト値なので、完全に略して（指定無しで）も同じです。

span値のみ（自動配置でエリア拡張だけする）

値を auto / span にすると、
grid-row: auto / span は自動配置のまま タテ方向にエリア拡張だけ、
grid-column: auto / span の場合は自動配置のまま 横方向にエリア拡張だけします。

サンプルの CSS を auto / span で自動配置に書き直してみます。
1セル1エリアのアイテム（CとD）は、指定そのものを省略しました。

.container div:nth-child(1) {
  grid-row: auto / span 2;    /*行が2つにまたがる*/
  }
.container div:nth-child(2) {
  grid-column: auto / span 2; /*カラムが2つにまたがる*/
  }
/*3番目、4番目のアイテム指定は省略しています*/

プレビューです。今までのレイアウトと変わっていませんね。

上のサンプルは、さらに省略して span値だけで書くこともできます。

.container div:nth-child(1) {
  grid-row:span 2;    /*行が2つにまたがる*/
  }
.container div:nth-child(2) {
  grid-column:span 2; /*カラムが2つにまたがる*/
  }
/*3番目、4番目のアイテム指定は省略*/

プレビューです。やはりレイアウトに問題ないですね。

この場合、終わり側の値を省略しているので span 2 / auto になっています。
終わり側に明確な基準（ライン番号やライン名）が無いので自動配置になり、行やカラムは単にエリア拡張だけします。

というわけで、span値だけで書けば、自動配置で単にエリア拡張だけすることになります。

まとめます。
grid-row や grid-columnで、
・値を1コでも限定（ライン番号・ライン名・エリア名を使う）したら固定配置
・値を1つも限定しない（auto や spanのみ）なら自動配置
ということです。

知っていると役に立つその他のルール

grid-row と grid-column　のその他のルールです。

あんまり使わなそうな指定なので、いまはいいやって人は読み飛ばしてもOK。
ただ、意図せぬレイアウトになったとき、こんなルールもあると知ってたほうが解決が早い（かもしれない...）のでメモっておきます。

終わり側が固定だと、始まり側の auto や span はそこを基準にカウント

「auto の既定値 1」のところでも少しやりましたが、
終わり側が限定されていて、始まり側が span や auto だと、始まり側は終わり側が基準になったカウントで決まります
「終わり側のラインから、またがるセルの数」で「始まりのライン」が決まるかんじ。

先程の8カラムのグリッドでも試してみます。

アイテムに grid-column: span 5 / 8 と指定すると、

.sample div {
  grid-column: span 5 / 8;
  background:#fcf;
  }

ライン3〜8の間がエリアになりました。

これは、終わり側の固定配置ライン「8」が基準になって、始まり側は span 5 で 5セル分カウントしたところから始まるので、ライン3が始まり側になったんです。

「ライン名」と「整数」の組み合わせは「○番目のライン名」

ここまでは「ライン番号」を「整数」として説明してきましたが、
「ライン名」と「整数」の組み合わせの場合は、数字は「○番目のライン名」という意味になります。これがまたややこしいですね。

アイテムに grid-column: 4 / 2 c と指定してみます。

.sample div {
  grid-column: 4 / 2 c;
  background:#fcf;
  }

4〜6のラインの間がエリアになりました。

これは、始まり側はライン「4」。
終わり側は「2番目の c 」という意味になって、2番目の c はライン6なので、4〜6のラインの間になりました。
これは、grid-column: 4 / c 2 と書いても同じです。順不同なので。

もう一丁。アイテムに grid-column: 4 / c -1 と指定してみます。

.sample div {
  grid-column: 4 / c -1;
  background:#fcf;
  }

4〜9のラインの間がエリアになりました。

これは、終わり側は「-1番目の c 」という意味。マイナスは右下端からのカウントですので最後の c 。ライン9の位置です。というわけで 4〜9のラインの間になりました。
これも grid-column: 4 / -1 c と書いても同じです。

最後に、アイテムに grid-column: 4 / c -2 と指定してみると、4〜6のラインの間がエリアになりました。2つ前のサンプル（grid-column: 4 / 2 c ）と同じ結果です。

終わり側の「 c -2 」は「-2番目の c 」という意味。後ろから2番目なので、先頭から2番目の c と同じライン6だからです。

「span」と「ライン名」を組み合わせると一番近いライン名を探す

「span 2」「span 3」などと、span を数字と組み合わせると「何セル分またがらせるか」の指定になりますが、「span」と「ライン名」を組み合わせると「一番近いライン名を探す」動作になります。

また 8カラムのグリッドで試します。

アイテムに grid-column: 4 / c span と指定してみます。

始まり側はライン4です。そこから右方向に一番近い最初の c を探して、それを終わりのラインにします。一番近い c はライン6なので、エリアは4〜6の間になりました。

アイテムに grid-column: c / span c と指定してみます。

始まり側の「c」は進行方向の最初の c なのでライン3です。そこから右方向に一番近い最初の c を探すとライン6なので、エリアは3〜6の間になりました。

アイテムに grid-column: span c / c -1 と指定してみます。

始まり側に span があるので、終わり側が基準になります。終わり側は「 c -1 」なので、右端から数えて最初の c 。ライン9です。
始まり側の「 span c 」は、ライン9から始まり側（左方向）に向かって最初の c までの間という意味。それはライン6にあるので、ライン6〜9までの間がエリアです。

値が3つだとどうなるでしょう。
grid-column: 2 / span c 2 と指定してみるとこうなります。

終わり側の「span c 2」は、「次の次（2個目）の c」という意味。
ライン2 からカウントした2個目の c はライン6 なので、2〜6の間がエリアになりました。

始まり側が3つの値だとどうかな。
grid-column: span c 2 / a -1 と指定してみるとこうなります。

終わり側は「 a -1 」なので右端から数えた最初の a です。ラインは7。ライン7から始まり側に向かって 2つめの c はライン3なので、3〜7の間がエリアになりました。

「ライン名 / 同じライン名」だとエラーで「span 1」となる

アイテムに grid-column: c / c と指定してみます。同じライン名です

.sample div {
  grid-column: c / c;
  background:#fcf;
  }

3〜4のラインの間がエリアになりました。

始まり側と終わり側が同じ値だとエラーになり、終わり側の値は無視されて「span 1」と等価になります。
ということで、最初の c から1セル分が終わり側になりました。

grid-row, grid-column は実はショートハンド！

そして最後に唐突ですが、
grid-rowプロパティと grid-columnプロパティは、実はショートハンドなんです。

grid-rowは、
grid-row-start と grid-row-endのショートハンドです。

grid-columnは、
grid-column-start と grid-column-endのショートハンドです。

まとめると、こういうこと。

grid-row	grid-row-start	行の開始のエッジ
grid-row	grid-row-end	行の終わりのエッジ
grid-column	grid-column-start	カラムの開始のエッジ
grid-column	grid-column-end	カラムの終わりのエッジ

記事中で、
「始まり側」と言っていたのが grid-row-start や grid-column-start、
「終わり側」と言っていたのが grid-row-end や grid-column-end というわけです。

ショートハンドじゃない書き方だとこんなかんじです。
エリアが1セルなら「-start」と「-end」両方書かなくてもどっちか1つでOK。

.container div:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;  /* -end書いてないけど1セル分なのでOK*/
  }
.container div:nth-child(2) {
  grid-row-start: 1;     /* -end書いてないけど1セル分なのでOK*/
  grid-column-start: 2;
  grid-column-end: 4;
  }
.container div:nth-child(3) {
  grid-row-start: 2;     /* -end書いてないけど1セル分なのでOK*/
  grid-column-end: 3;    /* -start書いてないけど1セル分なのでOK*/
  }
.container div:nth-child(4) {
  grid-row-start: 2;     /* -end書いてないけど1セル分なのでOK*/
  grid-column-end: 4;    /* -start書いてないけど1セル分なのでOK*/
  }

プレビューも一応

上のCSSを、今回のショートハンドで書くとこうなります。

.container div:nth-child(1) {
  grid-row: 1 / span 2;
  grid-column: 1;
  }
.container div:nth-child(2) {
  grid-row: 1;
  grid-column: 2 / span 2;
  }
.container div:nth-child(3) {
  grid-row: 2;
  grid-column: 2;
  }
.container div:nth-child(4) {
  grid-row: 2;
  grid-column: 3;
  }

次回予告

今回も長くて読むのが大変でしたね。
使ってみればすぐわかるんですけど、文章で説明するとこんがらがってきます。

grid-rowプロパティと grid-columnプロパティは、実はショートハンドだというのも、最初からそう書くか迷ったのですが「これショートハンド以外使わないだろう」と思って今回の書き方にしました。

さて次回は、さらに上位のショートハンドの grid-areaプロパティについて。
grid-row-start、grid-column-start、grid-row-end、grid-column-end の4つを一括で指定するショートハンドです。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2021-09-30（Thu）│
投稿日：2021-04-03（Sat）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿