使用CSS網格建立會議時間表

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

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

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

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

佈局需求定義

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

我曾協助安排過幾次WordCamp，並設計過WordCamp網站，因此我了解現有HTML表格佈局的不足之處。如果日程安排不符合統一網格，那麼……¯\_(ツ)_/¯

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

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

開始：穩固的HTML

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

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

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

  <h3 id="am">8:00am</h3>
  <div class="session session-1">
    <h4 id="a-href-https-www-php-cn-link-ac-c-dd-dc-b-e-fe-c-e-b-會議主題-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">會議主題</a></h4>
    8:00am - 9:00am
    賽道1
    演講者姓名</div>


  <h3 id="am">9:00am</h3>
  <div class="session session-2">
    <h4 id="a-href-https-www-php-cn-link-ac-c-dd-dc-b-e-fe-c-e-b-會議主題-a"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">會議主題</a></h4>
    9:00am - 10:00am
    賽道1
    演講者姓名</div>




</div>

移動佈局和網格回退完成！

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

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

添加網格佈局

現在是實際的CSS Grid部分！

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

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

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

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

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

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

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

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

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

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

 .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];
}

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

定義了基於時間和賽道的網格線後，我們現在只需知道會議的時間和賽道即可放置任何會議！

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

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

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

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

當使用1fr確定行高時，所有行都具有相同的高度。該高度由日程安排中最高行的內容決定。 （我不得不閱讀W3C關於fr的規範才能弄清楚這一點！）這會產生一個高度與時間成比例的漂亮日程安排，但也可能導致非常高的佈局。

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

關於輔助功能的一句話

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

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

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

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

添加粘性賽道名稱

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

賽道名稱位於第一行網格中，方便地命名為“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);
    }
  }
}

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

結果

以下是我們介紹的所有內容組合在一起後的樣子！

我們才剛剛開始

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

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