新しいテクノロジーを巧みに使用していることの達(dá)成感は比類のないものです！さまざまな入門ガイドを読んで、クールなデモンストレーションに感謝するのは良いことですが、自分のプロジェクトで実際にそれらを使用している場(chǎng)合にのみ、その本質(zhì)を本當(dāng)に理解できます。

會(huì)議スケジュールの柔軟なレイアウトを構(gòu)築する過(guò)程で、CSSグリッドの新たな理解を得ました。プロジェクトのさまざまな要件は、グリッドの利點(diǎn)、つまり2次元（垂直および水平）レイアウト、および子要素の複雑な位置付けに完全に沿っています。概念実証を構(gòu)築する過(guò)程で、コードを非常に読みやすく、非常に興味深い使用にするためのいくつかのトリックを発見(jiàn)しました。

最終的なデモには、いくつかの興味深いCSSグリッド機(jī)能が含まれており、日常の開(kāi)発ではあまり遭遇しないグリッドの詳細(xì)を掘り下げることを余儀なくされました。

開(kāi)始する前に、別のタブを開(kāi)き、CSS-TricksのCSSグリッドガイドを參照して、いつでもテキストに関係する概念を確認(rèn)することをお?jiǎng)幛幛筏蓼埂?/p>

レイアウト要件定義

私は、WordCampに觸発された次のレイアウトを作成しようとしました。毎年世界中でWordPressをテーマにした會(huì)議を何百ものカンファレンスにしました。これらのアクティビティはサイズとフォームが異なりますが、すべて同じスケジュールレイアウトツールを使用しています。

WordCampの手配を何度か手に入れ、WordCampのWebサイトを設(shè)計(jì)したので、既存のHTMLテーブルレイアウトの欠點(diǎn)を理解しています。スケジュールが統(tǒng)一グリッドに準(zhǔn)拠していない場(chǎng)合、...ˉ\ _（ツ）_/ˉ

より良いアプローチを見(jiàn)つけるために、最初にレイアウト要件をリストしました。

• 可変長(zhǎng)さの會(huì)議（設(shè)定された時(shí)間刻みに限定）
  同時(shí)に3つの部屋に1時(shí)間の講義があり、他の部屋で2時(shí)間のセミナーがあることを想像してください。
• 1つ以上の「トラック」を橫切る會(huì)議トラックは、多くの場(chǎng)合、會(huì)場(chǎng)の特定の部屋に関連付けられています。ワードキャンプがシアトルで懸念している限り、會(huì)場(chǎng)は2つの部屋をマージするために壁で取り壊すことができます！
• スケジュールには、自由時(shí)間を含めることができます
  土壇場(chǎng)でのキャンセルまたは超短い會(huì)議は、スケジュールの余地を殘します。
• CSSでカスタマイズできるように設(shè)計(jì)されています
  WordCamp Webサイトでは、CSSを介したテーマ設(shè)定のみが許可されています。
• レイアウトは、CMSコンテンツに基づいて自動(dòng)的に生成できます
  數(shù)千のウェブサイトで構(gòu)造化された會(huì)議データに基づいてレイアウトを構(gòu)築しているため、過(guò)度に賢いまたはカスタマイズされたHTMLまたはCSSに頼ることはできません。

開(kāi)始：安定したHTML

CSSを書く前に、私は常に固體HTMLから始めます。

トップレベル<div> <code>.scheduleクラスがあり、メッシュ親要素として機(jī)能します。それぞれのユニークな開(kāi)始時(shí)間には、獨(dú)自のタイトルがあり、その後、その時(shí)點(diǎn)で始まるすべての會(huì)議が続きます。各會(huì)議のマーキングは重要ではありませんが、會(huì)議がいつどこにあるかを知るためにレイアウトを見(jiàn)る必要がないことを確認(rèn)してください。 （後で理由を理解するでしょう。）

<h2>會(huì)議のスケジュール</h2>
<div class="schedule">

  <h3>午前8時(shí)</h3>
  <div class="session session-1">
    <h4><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">會(huì)議のトピック</a></h4>
    午前8時(shí) - 午前9時(shí)
    トラック1
    スピーカーの名前</div>


  <h3>午前9時(shí)</h3>
  <div class="session session-2">
    <h4><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">會(huì)議のトピック</a></h4>
    午前9時(shí) - 午前10時(shí)
    トラック1
    スピーカーの名前</div>




</div>

モバイルレイアウトとグリッドフォールバックが完了しました！

獨(dú)自のCSSをいくつか追加してページを美化し、CSSグリッドブラウザーなしでモバイルレイアウトとフォールバックが完了しました！

これが私が使用している色を使用しているように見(jiàn)えるものです：

グリッドレイアウトを追加します

今が実際のCSSグリッドパーツです！

建設(shè)プロセス中の私のインスピレーションの瞬間は、CSS-Tricksに関するロビンの記事「CSSグリッドを使用したバーチャートを作成してください」を読んだことから來(lái)ました。要するに、グリッドの行はチャートの高さの1％を表しているため、バーがスパンする行の數(shù)は、それが表す割合と同じです。

 .chart {
  ディスプレイ：グリッド;
  グリッドテンプレート列：繰り返し（100、1FR）; /* 1行= 1％！ */
}

.fifty-percent-bar {
  グリッドロー：51 /101; / * 101-51 = 50 => 50％ */
}

これにより、グリッドは、ある種のルールインクリメンタルユニットに関連するレイアウトに最適であることがわかりました。スケジュールの場(chǎng)合、ユニットは時(shí)間です！このデモでは、30分間の増分を使用しますが、ニーズに合わせて調(diào)整できます。 （Chromeのバグに注意してください。グリッドレイアウトを1000行に制限します。）

私が試した最初のバージョンでは、同様の構(gòu)文といくつかの基本的な數(shù)學(xué)を使用して、ロビンに似たバーチャートに會(huì)議を入れます。午前8時(shí)から午後12時(shí)までに8つの30分の増分があるため、8行を使用します。暗黙のグリッドライン番號(hào)は1（0ではなく）から始まるため、グリッドラインには1から9に番號(hào)が付けられていることを忘れないでください。

 。スケジュール {
  ディスプレイ：グリッド;
  グリッドテンプレート列：繰り返し（8、1Fr）;
}

.session-1 {
  グリッドロー：1/3; /* 8：00-9：00 am、3-1 = 2 30分刻み*/
}

.session-2 {
  グリッドロー：3/6; /* 9：00-10：30 am、6-3 = 3 30分刻み*/
}

この手法の欠點(diǎn)は、多くの行でグリッドにアイテムを置くことは非常に抽象的で混亂することです。 （この質(zhì)問(wèn)は、ロビンのバーチャートのデモにも多くの複雑さを追加します。）

これは、グリッドラインという名前が登場(chǎng)する場(chǎng)所です！グリッドライン番號(hào)に依存する代わりに、各ラインに対応する時(shí)間に応じて予測(cè)可能な名前を付けることができます。

 。スケジュール {
  ディスプレイ：グリッド;
  グリッドテンプレート列：
    [TIME-0800] 1FR
    [Time-0830] 1FR
    [TIME-0900] 1FR
    [Time-0930] 1FR;
    /*など...
        注：24時(shí)間の時(shí)間をライン名*/
}

.session-1 {
  グリッドロー：TIME-0800 / TIME-0900;
}

.session-2 {
  グリッドロー：TIME-0900 / TIME-1030;
}

これはとても理解しやすいです。會(huì)議が開(kāi)始または終了する前または終了後の行數(shù)を決定する複雑な數(shù)學(xué)計(jì)算は必要ありません。さらに良いことに、WordPressに保存されている情報(bào)を使用して、グリッドライン名を生成し、レイアウトスタイルを満たすことができます。グリッドに開(kāi)始時(shí)間と終了時(shí)間を追加すると、大丈夫です！

スケジュールには複數(shù)のトラックがあるため、各トラックの列を設(shè)定する必要があります。トラックは、各グリッドラインの名前のトラックラインを使用して、時(shí)間と同様に機(jī)能します。開(kāi)始時(shí)間タイトルの追加の最初の列もあります。

 .schedule { / *続き * /
  Grid-Template-Columns：
    [時(shí)間] 4em
    [トラック1-スタート] 1FR
    [トラック1エンドトラック2-スタート] 1FR
    [トラック2エンドトラック-3-Start] 1FR
    [トラック3エンドトラック-4-Start] 1FR
    [トラック4エンド];
}

しかし、ここでは、命名グリッドラインをさらに一歩進(jìn)めます。各行は2つの名前を取得します。それが開(kāi)始するトラックを示すトラックと、終了を示すトラックです。これは厳密に必要ではありませんが、特に會(huì)議が複數(shù)の列にまたがる場(chǎng)合、コードをより明確にします。

時(shí)間とトラックベースのグリッドラインが定義されたら、會(huì)議の時(shí)間と追跡を知る必要があります。

 .session-8 {
  グリッドロー：Time-1030 / Time-1100;
  Grid-Column：Track-2-Start / Track-3-End; /* 2つのトラックを越えます！ */
}

これらすべてをまとめると、使用するのが非常に快適な長(zhǎng)いが非常に読みやすいコードがいくつかあります。

 @media畫面と（min-width：700px）{
  。スケジュール {
    ディスプレイ：グリッド;
    グリッドギャップ：1EM;
    グリッドテンプレート列：
      [トラック] Auto /*予言！ */
      [TIME-0800] 1FR
      [Time-0830] 1FR
      [TIME-0900] 1FR
      [Time-0930] 1FR
      [TIME-1000] 1FR
      [Time-1030] 1FR
      [Time-1100] 1FR
      [Time-1130] 1FR
      [TIME-1200] 1FR;
    Grid-Template-Columns：
      [時(shí)間] 4em
      [トラック1-スタート] 1FR
      [トラック1エンドトラック2-スタート] 1FR
      [トラック2エンドトラック-3-Start] 1FR
      [トラック3エンドトラック-4-Start] 1FR
      [トラック4エンド];
  }

  .time-slot {
    Grid-Column：Times;
  }
}

<div style="grid-column: track-1; grid-row: time-0800 / time-0900;">

</div>
<div style="grid-column: track-2; grid-row: time-0800 / time-0900">

</div>

最終コードでは、會(huì)議の配置にインラインスタイルを使用しています。これを行うのが好きではなく、より最新のブラウザを使用している場(chǎng)合は、CSS変數(shù)を介して行名をCSSに渡すことができます。

簡(jiǎn)単な説明：FRユニットと自動(dòng)値を使用して、ラインの高さを設(shè)定します

注目に値する詳細(xì)の1つは、行の高さを定義するためのFRユニットを使用することです。

1FRを使用して行の高さを決定する場(chǎng)合、すべての行の高さが同じです。この高さは、スケジュールの最高の列の內(nèi)容によって決まります。 （これを理解するためにFRに関するW3C仕様を読む必要がありました?。─长欷稀r(shí)間に比例するが、非常に高いレイアウトにつながる可能性のある素晴らしいスケジュールを生成します。

たとえば、スケジュールグリッドが午前7時(shí)から午後6時(shí)まで15分の増分を使用している場(chǎng)合、合計(jì)48のグリッド行があります。この場(chǎng)合、各グリッド行の高さがそのコンテンツによって決定されるため、スケジューリングの高さがよりコンパクトになるため、自動(dòng)を行の高さとして使用することをお?jiǎng)幛幛筏蓼埂?/p>

補(bǔ)助機(jī)能に関する文

一部のCSSグリッドテクノロジーには、アクセシビリティの懸念があります。具體的には、ソース順序と一致しない方法で情報(bào)の順序を視覚的に変更する能力は、キーボードナビゲーションを使用している人に問(wèn)題を引き起こす可能性があります。

このレイアウトはこの機(jī)能を使用してグリッドにアイテムを任意に配置するため、注意が必要です。ただし、タイトルとソースの順序は開(kāi)始時(shí)間の視覚化と一致するため、これは安全な方法であるように思えます。

似たようなことをしたい場(chǎng)合は、アクセシビリティ機(jī)能について慎重に考えてください。この場(chǎng)合、情報(bào)を年代順に配置することは理にかなっていますが、タブの順序が水平ではなく下向きである正當(dāng)なケースを想像できます。 （これを行うためにこのデモを変更することはそれほど難しくないはずです?。?/p>

あなたが何をするにしても、常にアクセシビリティを考慮してください。

スティッキートラック名を追加します

最後に、各列の上部にテーブルタイトルのように見(jiàn)えるトラック名を追加する時(shí)が來(lái)ました。カンファレンストラックはすでに表示されているため、 aria-hidden="true"を使用してAssistiveテクノロジーの「タイトル」を隠すことにしました。

トラック名は最初の行グリッドにあり、「トラック」と名付けられた便利な名前です。奇妙なオーバーフローの問(wèn)題がない限り、 position: stickyスクロール中にこれらの名前を表示します。

トラック1
トラック2
トラック3
トラック4

 .track-slot {
  表示：なし; /*グリッドレイアウトを使用する場(chǎng)合にのみ表示されます*/
}

@supports（display：grid）{
  @media畫面と（min-width：700px）{    
    .track-slot {
      グリッドロー：トラック;
      表示：ブロック;
      位置：粘著性;
      上：0;
      z-index：1000;
      背景色：RGBA（255,255,255、.9）;
    }
  }
}

これは、最終プレゼンテーションの巧妙な仕上げです。 ?

結(jié)果

これが、私たちがまとめたすべての後のように見(jiàn)えるように紹介したものです！

始めたばかりです

このスケジュールは間違いなく私が今までに作った中で最も満足のいくCSSグリッドアプリです。私はその「データ駆動(dòng)型」とセマンティックの行の命名が好きで、アクセシビリティとCMSの要件は不便なく完全に一致しています。

私にとって殘っている唯一の質(zhì)問(wèn)は、他の種類の「データ駆動(dòng)型」メッシュを構(gòu)築できることです。優(yōu)れたカレンダーレイアウトと獨(dú)占ボードのレイアウトを見(jiàn)ました。では、サッカースタジアム、タイムライン、ダイニングテーブル、劇場(chǎng)席はどうですか？ほかに何か？