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

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

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

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

佈局需求定義

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

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

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

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

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

在編寫任何CSS之前，我總是先從堅(jiān)實(shí)的HTML開始。

頂級(jí)<div>將具有<code>.schedule類，並作為網(wǎng)格父元素。每個(gè)唯一開始時(shí)間都有其自己的標(biāo)題，後跟所有在該時(shí)間開始的會(huì)議。每個(gè)會(huì)議的標(biāo)記並不重要，但請(qǐng)確保無需查看佈局即可了解會(huì)議的時(shí)間和地點(diǎn)。 （稍後您將明白原因。）

<h2>會(huì)議日程</h2>
<div class="schedule">

  <h3>8:00am</h3>
  <div class="session session-1">
    <h4><a href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">會(huì)議主題</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">會(huì)議主題</a></h4>
    9:00am - 10:00am
    賽道1
    演講者姓名</div>




</div>

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

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

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

添加網(wǎng)格佈局

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

我在構(gòu)建這個(gè)過程中靈光一現(xiàn)的時(shí)刻來自於閱讀Robin在CSS-Tricks上的文章，“使用CSS Grid製作條形圖”。簡而言之：一個(gè)網(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% */
}

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

我嘗試的第一個(gè)版本使用了與Robin的條形圖類似的語法和一些基本的數(shù)學(xué)運(yùn)算來放置會(huì)議。我們使用八行，因?yàn)樵谏衔?點(diǎn)到中午12點(diǎn)之間有八個(gè)30分鐘的增量。請(qǐng)記住，隱式網(wǎng)格線編號(hào)從1開始（而不是0），因此網(wǎng)格行編號(hào)為1到9。

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

.session-1 {
  grid-row: 1 / 3; /* 上午8點(diǎn)-9點(diǎn)，3 - 1 = 2個(gè)30分鐘增量*/
}

.session-2 {
  grid-row: 3 / 6; /* 上午9點(diǎn)-10點(diǎn)30分，6-3 = 3個(gè)30分鐘增量*/
}

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

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

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

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

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

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

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

 .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)格線更進(jìn)一步。每條線都獲得兩個(gè)名稱：一個(gè)表示它開始的賽道，一個(gè)表示它結(jié)束的賽道。這並非嚴(yán)格必要，但它使代碼更加清晰，尤其是在會(huì)議跨越多個(gè)列時(shí)。

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

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

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

 @media screen and (min-width: 700px) {
  .schedule {
    display: grid;
    grid-gap: 1em;
    grid-template-rows:
      [tracks] auto /* 預(yù)示！ */
      [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)樣式進(jìn)行會(huì)議放置，這對(duì)我來說感覺很對(duì)。如果您不喜歡這樣做並且正在使用更現(xiàn)代的瀏覽器，您可以通過CSS變量將行名傳遞給CSS。

快速說明：使用fr單位與auto值進(jìn)行行高設(shè)置

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

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

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

關(guān)於輔助功能的一句話

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

此佈局使用此功能在網(wǎng)格上任意放置項(xiàng)目，因此需要謹(jǐn)慎。但是，由於標(biāo)題和源順序與開始時(shí)間的可視化對(duì)齊，因此在我看來，這似乎是一種安全的使用方式。

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

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

添加粘性賽道名稱

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

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

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

 .track-slot {
  display: none; /* 僅在使用Grid佈局時(shí)可見*/
}

@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);
    }
  }
}

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

結(jié)果

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

我們才剛剛開始

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

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