??? ??? ???? ???? ?? ? ??? ??? ? ????! ??? ?? ???? ?? ?? ??? ???? ?? ??? ??? ??? ?????? ??? ???? ???? ??? ??? ? ????.

?? ??? ?? ??? ????? ???? ???? CSS ???? ?? ??? ??? ?????. ? ????? ??? ?? ??? ???? ??? ???? ????? : 2 ?? (?? ? ??) ????, ??? ??? ??? ??. ?? ??? ???? ????, ?? ??? ?? ?? ?? ???? ??? ? ?? ??? ??????.

??? ???? ???? CSS ??? ??? ???? ??? ???? ???? ?? ???? ?? ??? ?? ??? ??? ?????.

???? ?? ?? ?? ?? CSS- ??? CSS ??? ???? ???? ???? ???? ??? ??? ???? ?? ?? ????.

???? ?? ?? ??

?? ?? ? ???? ?? WordPress? ??? ? ???? ??? ?? ?? ????? ??? ??????. ??? ??? ??? ??? ???? ?? ??? ?? ???? ??? ?????.

WordCamp? ?? ? ???? WordCamp ? ???? ???? ?? HTML ??? ????? ??? ??????. ??? ?? ???? ???? ??? ... ˉ \ _ (ツ) _/ˉ

? ?? ?? ??? ?? ?? ?? ???? ?? ??? ??????.

• ?? ?? ?? (?? ?? ??? ??)
  ??? 3 ?? ???? 1 ?? ??? ?? ??? 2 ??? ???? ???????.
• ?? ??? "??"? ?? ??? ???? ??? ?? ??? ?? ??? ??? ????. ????? WordCamp? ?? ?, ???? ??? ???? ? ?? ?? ?? ? ? ????!
• ???? ?? ??
  ? ??? ? ???? ??? ?? ?? ?? ??? ??? ??? ??? ?? ????.
• CSS? ??? ?? ? ? ??? ???????
  WordCamp ? ???? CSS? ???? ?? ?? ? ?????.
• CMS ???
  ? ?? ????? ???? ?? ? ? ????. ?? ?? ? ????? ??? ? ?? ???? ???? ????? ???? ?? ??? ???? ????? ??? HTML ?? CSS? ?? ? ? ????.

?? : ???? HTML

CSS? ???? ?? ?? Solid HTML? ?????.

??? ??<div> <code>.schedule ???? ?? ?? ?? ?? ??????. ? ??? ?? ???? ?? ??? ? ?? ???? ?? ??? ????. ? ??? ??? ???? ??? ??? ?? ??? ??? ?? ?? ????? ? ??? ????. (??? ??? ??? ????.)

<h2> ?? ??</h2>
<div class="schedule">

  <h3>?? 8?</h3>
  <div class="session session-1">
    <h4><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">?? ??</a></h4>
    ?? 8? - ?? 9?
    ?? 1
    ???? ??</div>


  <h3>?? 9?</h3>
  <div class="session session-2">
    <h4><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">?? ??</a></h4>
    ?? 9? - ?? 10?
    ?? 1
    ???? ??</div>




</div>

??? ???? ? ??? ??? ???????!

??? CSS? ???? ???? ?????? CSS ??? ??????? ??? ???? ? ??? ?????!

?? ???? ??? ???? ??? ??? ????.

??? ????? ??????

?? ?? CSS ??? ?????!

?? ???? ??? ??? CSS- ??? ?? Robin? ??,“CSS ???? ??? ?? ?? ??”?? ?????. ??? ??? ??? ?? ?? ??? 1%? ????? ??? ???? ?? ?? ???? ???? ?????.

 .CHART {
  ????? : ???;
  ???-??? ? : ?? (100, 1fr); /* 1 ?? = 1%! */
}

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

?? ?? ???? ??? ?? ?? ??? ??? ?? ????? ????? ?? ???????. ??? ??, ??? ?? ???! ? ????? 30 ? ??? ????? ??? ?? ??? ? ????. (Chrome? ??? ?? ??? ??? ????? 1000 ??? ?????.)

?? ??? ? ?? ??? ??? ??? ?? ?? ??? ???? ??? Robin? ??? ?? ??? ????. ?? 8??? ?? 12? ??? 8 ? ??? 8 ? ??? 8 ?? ?????. ?? ? ??? ?? ??? 1 (0? ?? 1)?? ????? ??? ??? 1?? 9? ??? ?????.

 .?? {
  ????? : ???;
  ???-??? ? : ?? (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 ? ??*/
}

? ??? ??? ?? ??? ???? ??? ???? ?? ?? ????? ?? ???? ????. (? ??? ?? Robin? ??? ?? ??? ?? ???? ????.)

??? ??? ??? ??? ??? ???? ????! ??? ?? ??? ???? ?? ?? ??? ?? ? ??? ?? ??? ??? ? ? ????.

 .?? {
  ????? : ???;
  ???-??? ? :
    [Time-0800] 1fr
    [Time-0830] 1fr
    [Time-0900] 1fr
    [Time-0930] 1fr;
    /* ?...
        ?? : 24 ?? ??? ?? ??*/? ??????.
}

.session-1 {
  ??? ?? : Time-0800 / Time-0900;
}

.session-2 {
  ??? ?? : Time-0900 / Time-1030;
}

??? ???? ?? ????. ??? ????? ?? ? ? ?? ?? ???? ?? ??? ??? ??? ???? ????. ? ?? ?? WordPress? ??? ??? ???? ??? ?? ??? ???? ???? ???? ?? ? ????. ?? ? ?? ??? ???? ???? ?????!

??? ?? ??? ???? ? ??? ?? ?? ???????. ??? ? ??? ??? ?? ? ?? ??? ???? ??? ???? ?????. ?? ?? ??? ?? ? ?? ?? ????.

 .Schedule { / * ?? * /
  ???-???-?? :
    [??] 4em
    [?? -1- ??] 1fr
    [Track-1 ?? ?? -2- ??] 1fr
    [?? -2- ?? ?? -3- ??] 1fr
    [?? -3- ?? ?? -4- ???] 1fr
    [?? -4- ??];
}

??? ??? ??? ?? ?? ??? ??? ? ?? ? ??????. ? ???? ? ?? ??? ????. ??? ??? ???? ??? ?? ???? ??? ????. ??? ???? ???? ??? ?? ??? ?? ?? ???? ? ??? ? ???? ????.

??? ?? ?? ??? ??? ???? ?? ????? ?? ?? ??? ?? ? ??????!

 .session-8 {
  ??? ?? : Time-1030 / Time-1100;
  ???-?? : ?? -2- ?? / ?? -3- ??; /* ? ??? ??! */
}

? ?? ?? ???? ????? ?? ??? ? ?? ?? ?? ??? ????.

 @Media ?? ? (min-width : 700px) {
  .?? {
    ????? : ???;
    ??? ? : 1em;
    ???-??? ? :
      [??] ?? /* ??! */
      [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;
    ???-???-?? :
      [??] 4em
      [?? -1- ??] 1fr
      [Track-1 ?? ?? -2- ??] 1fr
      [?? -2- ?? ?? -3- ??] 1fr
      [?? -3- ?? ?? -4- ???] 1fr
      [?? -4- ??];
  }

  . ?? ?? {
    ???-?? : ??;
  }
}

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

????? ?? ?? ? ??? ? ??? ???? ?? FR ??? ???? ????.

1FR? ???? ? ??? ??? ? ?? ?? ??? ?????. ? ??? ???? ?? ?? ?? ??? ?? ?????. (?? ??? ?? ?? ?? FR? ?? W3C ??? ?????!) ??? ??? ???? ?? ??? ??? ?? ? ?? ?? ?????? ??? ? ????.

?? ??, ??? ???? ?? 7 ?? ? ?? 6 ?? ? 15 ? ??? ???? ?? ? 48 ?? ??? ?? ????. ? ?? ? ??? ?? ??? ???? ?? ????? ????? ? ????? ??? Auto? ? ??? ????????.

?? ??? ?? ??

?? CSS ??? ???? ??? ??? ????. ?????, ?? ??? ???? ?? ???? ?? ??? ????? ???? ??? ??? ?????? ???? ????? ??? ??? ? ????.

? ?????? ??? ???? ??? ???? ??? ????????????. ??? ?? ? ?? ??? ?? ??? ???? ???? ??? ??? ??? ?? ?? ? ? ????.

??? ????? ??? ??? ??? ??? ?? ???? ?????? . ? ??, ??? ????? ???? ?? ??????, ? ??? ????? ?? ?? ? ??? ? ??? ??? ? ????. (? ??? ???? ?? ?? ??? ??????!)

??? ????? ?? ???? ??????.

??? ?? ??? ??????

?????, ? ? ??? ??? ???? ??? ?? ??? ???????. ???? ??? ?? ??? ??? aria-hidden="true" ???? ?? ??? "??"? ???? ??????.

?? ??? ? ?? ? ???? ??? ???? "??"??????. ??? ???? ????? ? position: sticky ????? ?? ??? ??? ??????.

 ?? 1
?? 2
?? 3
?? 4

 .Track-Slot {
  ????? : ??; /* ??? ????? ??? ?? ??*/
}

@supports (display : ???) {
  @Media ?? ? (min-width : 700px) {    
    .Track-Slot {
      ??? ? : ??;
      ????? : ??;
      ?? : ???;
      ?? : 0;
      Z- ??? : 1000;
      ??? : RGBA (255,255,255, .9);
    }
  }
}

??? ?? ????????? ??? ??? ?????. ?

??

??? ??? ?? ?? ?? ???? ??? ?????!

??? ?? ??????

? ??? ??? ?? ?? ?? ????? CSS ??? ????. ?? "??? ??"? ??? ? ??? ???? ??? ? CMS ?? ??? ???? ?? ???? ?????.

??? ?? ??? ??? ?? ??? "??? ??"??? ?? ? ??? ????? ?? ??? ?? ????? ?? ?? ????? ?????. ???? ?? ???, ?? ??, ?? ?? ?? ??? ?????? ?? ???