巧妙運用新技術的成就感無與倫比！閱讀各種入門指南，欣賞炫酷的演示固然不錯，但只有在自己的項目中實際運用時，才能真正體會其精髓。

在為會議日程安排構建靈活布局的過程中，我對CSS Grid有了新的認識。該項目的各項需求與Grid的優(yōu)勢完美契合：二維（垂直和水平）布局，以及子元素的復雜定位。在構建概念驗證的過程中，我發(fā)現(xiàn)了一些技巧，使代碼高度可讀，且使用起來非常有趣。

最終的演示包含了一些有趣的CSS Grid特性，并迫使我深入研究一些日常開發(fā)中不常遇到的Grid細節(jié)。

在開始之前，最好打開另一個標簽頁，參考CSS-Tricks的CSS Grid指南，以便隨時查閱文中涉及的概念。

布局需求定義

我著手創(chuàng)建以下布局，靈感來自WordCamp——每年世界各地舉辦的數(shù)百場以WordPress為主題的會議。這些活動規(guī)模和形式各異，但都使用相同的日程安排布局工具。

我曾協(xié)助安排過幾次WordCamp，并設計過WordCamp網(wǎng)站，因此我了解現(xiàn)有HTML表格布局的不足之處。如果日程安排不符合統(tǒng)一網(wǎng)格，那么……ˉ\_(ツ)_/ˉ

為了尋找更好的方法，我首先列出了布局需求：

• 可變長度的會議（限制在設定的時間增量內(nèi)）
  想象一下，三個房間里同時進行連續(xù)的一小時演講，另一個房間里進行兩小時的研討會。
• 跨越一個或多個“賽道”的會議賽道通常與場地的特定房間相關聯(lián)。就我所在西雅圖的WordCamp而言，場地可以拆除一堵墻來合并兩個房間！
• 日程安排可以包含空閑時間
  最后一刻的取消或超短的會議會在日程安排中留下空隙。
• 設計易于使用CSS自定義
  WordCamp網(wǎng)站僅允許通過CSS進行主題設置。
• 布局可以根據(jù)CMS內(nèi)容自動生成
  由于我們是在數(shù)千個網(wǎng)站上根據(jù)結構化的會議數(shù)據(jù)構建布局，因此我們不能依賴任何過于巧妙或定制的HTML或CSS。

開始：穩(wěn)固的HTML

在編寫任何CSS之前，我總是先從堅實的HTML開始。

頂級<div>將具有<code>.schedule類，并作為網(wǎng)格父元素。每個唯一開始時間都有其自己的標題，后跟所有在該時間開始的會議。每個會議的標記并不重要，但請確保無需查看布局即可了解會議的時間和地點。（稍后您將明白原因。）

<h2>會議日程</h2>
<div class="schedule">

  <h3>8:00am</h3>
  <div class="session session-1">
    <h4><a href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">會議主題</a></h4>
    8:00am - 9:00am
    賽道 1
    演講者姓名
  </div>


  <h3>9:00am</h3>
  <div class="session session-2">
    <h4><a href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">會議主題</a></h4>
    9:00am - 10:00am
    賽道 1
    演講者姓名
  </div>




</div> 

移動布局和網(wǎng)格回退完成！

添加一些您自己的CSS來美化頁面，我們的移動布局和不支持CSS Grid瀏覽器的回退就已經(jīng)完成了！

以下是使用我所用顏色的樣子：

添加網(wǎng)格布局

現(xiàn)在是實際的CSS Grid部分！

我在構建這個過程中靈光一現(xiàn)的時刻來自于閱讀Robin在CSS-Tricks上的文章，“使用CSS Grid制作條形圖”。簡而言之：一個網(wǎng)格行代表圖表高度的1%，因此條形跨越的行數(shù)與其代表的百分比相同。

.chart {
  display: grid;
  grid-template-rows: repeat(100, 1fr); /* 1行=1%! */
}

.fifty-percent-bar {
  grid-row: 51 / 101; /* 101 - 51 = 50 => 50% */
}

這讓我意識到，網(wǎng)格非常適合任何與某種規(guī)則增量單位相關的布局。在日程安排的情況下，該單位是時間！在本演示中，我們將使用30分鐘的增量，但您可以根據(jù)自己的需要進行調(diào)整。（只需注意Chrome的bug，它將Grid布局限制為1000行。）

我嘗試的第一個版本使用了與Robin的條形圖類似的語法和一些基本的數(shù)學運算來放置會議。我們使用八行，因為在上午8點到中午12點之間有八個30分鐘的增量。請記住，隱式網(wǎng)格線編號從1開始（而不是0），因此網(wǎng)格行編號為1到9。

.schedule {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
}

.session-1 {
  grid-row: 1 / 3; /* 上午8點-9點，3 - 1 = 2個30分鐘增量 */
}

.session-2 {
  grid-row: 3 / 6; /* 上午9點-10點30分，6-3 = 3個30分鐘增量 */
}

這種技術的缺點是，在一個有很多行的網(wǎng)格上放置項目非常抽象和令人困惑。（這個問題也給Robin的條形圖演示增加了大量的復雜性。）

這就是命名網(wǎng)格線發(fā)揮作用的地方！我們可以根據(jù)相應的時間，為每條線賦予一個可預測的名稱，而不是依賴網(wǎng)格線編號。

.schedule {
  display: grid;
  grid-template-rows:
    [time-0800] 1fr
    [time-0830] 1fr
    [time-0900] 1fr
    [time-0930] 1fr;
    /* etc...
        注意：使用24小時制的時間作為線名 */
}

.session-1 {
  grid-row: time-0800 / time-0900;
}

.session-2 {
  grid-row: time-0900 / time-1030;
}

這非常容易理解。無需復雜的數(shù)學計算來確定會議開始或結束前后的行數(shù)。更好的是，我們可以使用存儲在WordPress中的信息生成網(wǎng)格線名稱和會議布局樣式。向網(wǎng)格添加開始和結束時間，就可以了！

由于日程安排有多個賽道，我們需要為每個賽道設置一列。賽道的工作方式與時間類似，為每個網(wǎng)格列線使用命名的賽道線。還有一列額外的第一列用于開始時間標題。

.schedule { /* continued */
  grid-template-columns:
    [times] 4em
    [track-1-start] 1fr
    [track-1-end track-2-start] 1fr
    [track-2-end track-3-start] 1fr
    [track-3-end track-4-start] 1fr
    [track-4-end];
}

但是在這里，我們將命名網(wǎng)格線更進一步。每條線都獲得兩個名稱：一個表示它開始的賽道，一個表示它結束的賽道。這并非嚴格必要，但它使代碼更加清晰，尤其是在會議跨越多個列時。

定義了基于時間和賽道的網(wǎng)格線后，我們現(xiàn)在只需知道會議的時間和賽道即可放置任何會議！

.session-8 {
  grid-row: time-1030 / time-1100;
  grid-column: track-2-start / track-3-end; /* 跨越兩個賽道！ */
}

將所有這些放在一起，我們得到了一些冗長但極其可讀的代碼，使用起來非常令人愉快。

@media screen and (min-width: 700px) {
  .schedule {
    display: grid;
    grid-gap: 1em;
    grid-template-rows:
      [tracks] 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:
      [times] 4em
      [track-1-start] 1fr
      [track-1-end track-2-start] 1fr
      [track-2-end track-3-start] 1fr
      [track-3-end track-4-start] 1fr
      [track-4-end];
  }

  .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>

最終代碼使用內(nèi)聯(lián)樣式進行會議放置，這對我來說感覺很對。如果您不喜歡這樣做并且正在使用更現(xiàn)代的瀏覽器，您可以通過CSS變量將行名傳遞給CSS。

快速說明：使用fr單位與auto值進行行高設置

值得注意的一個細節(jié)是使用fr單位來定義行高。

當使用1fr確定行高時，所有行都具有相同的高度。該高度由日程安排中最高行的內(nèi)容決定。（我不得不閱讀W3C關于fr的規(guī)范才能弄清楚這一點?。┻@會產(chǎn)生一個高度與時間成比例的漂亮日程安排，但也可能導致非常高的布局。

例如，如果您的日程安排網(wǎng)格從上午7點到下午6點使用15分鐘的增量，則共有48個網(wǎng)格行。在這種情況下，您可能希望使用auto作為您的行高，因為每個網(wǎng)格行的高度由其內(nèi)容決定，因此日程安排更加緊湊。

關于輔助功能的一句話

某些CSS Grid技術確實存在輔助功能方面的擔憂。具體來說，以與源順序不匹配的方式視覺上更改信息順序的能力會給使用鍵盤導航的人帶來問題。

此布局使用此功能在網(wǎng)格上任意放置項目，因此需要謹慎。但是，由于標題和源順序與開始時間的可視化對齊，因此在我看來，這似乎是一種安全的使用方式。

如果您受到啟發(fā)去做類似的事情，請仔細考慮輔助功能。在這種情況下，按時間順序排列信息是有意義的，但我可以想象一個合法的案例，即TAB順序是向下而不是橫向。（修改此演示以執(zhí)行此操作應該不太難！）

無論您做什么，都要始終考慮輔助功能。

添加粘性賽道名稱

最后，是時候添加看起來像表格標題的賽道名稱到每一列的頂部了。由于會議的賽道已經(jīng)可見，我選擇使用aria-hidden="true"來隱藏輔助技術中的“標題”。

賽道名稱位于第一行網(wǎng)格中，方便地命名為“tracks”。只要您沒有任何奇怪的溢出問題，position: sticky就會讓這些名稱在滾動時保持可見。

賽道 1
賽道 2
賽道 3
賽道 4

.track-slot {
  display: none; /* 僅在使用Grid布局時可見 */
}

@supports( display:grid ) {
  @media screen and (min-width:700px) {    
    .track-slot {
      grid-row: tracks;
      display: block;
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: rgba(255,255,255,.9);
    }
  }
}

這是最終演示的一個巧妙的收尾潤色。?

結果

以下是我們介紹的所有內(nèi)容組合在一起后的樣子！

我們才剛剛開始

這個日程安排絕對是我制作過的最令人滿意的CSS Grid應用。我喜歡它的“數(shù)據(jù)驅動”和語義化的行命名方式，輔助功能和CMS需求也完美契合，沒有任何不便。

對我來說，唯一剩下的問題是還有哪些其他類型的“數(shù)據(jù)驅動”網(wǎng)格可以構建？我看到了一些很棒的日歷布局，還有一個大富翁棋盤布局。那么足球場、時間線、餐桌或劇院座位呢？還有什么？