The sense of accomplishment of cleverly using new technologies is unparalleled! It is good to read various introductory guides and appreciate cool demonstrations, but only when you actually use them in your own project can you truly understand its essence.

I have gained a new understanding of CSS Grid in the process of building a flexible layout for the meeting schedule. The various requirements of the project are perfectly in line with the advantages of Grid: two-dimensional (vertical and horizontal) layout, and complex positioning of child elements. During the process of building the proof of concept, I discovered some tricks to make the code highly readable and very interesting to use.

The final demo included some interesting CSS Grid features and forced me to dig into some Grid details that weren't often encountered in everyday development.

Before you begin, it is best to open another tab and refer to CSS-Tricks' CSS Grid Guide to see the concepts involved in the text at any time.

Layout requirements definition

I set out to create the following layout, inspired by WordCamp—hundreds of WordPress-themed conferences held around the world every year. These activities vary in size and form, but all use the same schedule layout tool.

I've helped arrange WordCamp several times and designed WordCamp websites so I understand the shortcomings of existing HTML table layouts. If the schedule does not conform to the unified grid, then... ˉ\_(ツ)_/ˉ

To find a better approach, I first listed the layout requirements:

• Variable length meeting (limited to set time increments)
  Imagine having one-hour lectures in three rooms at the same time and two-hour seminars in the other room.
• A conference track across one or more "tracks" is often associated with a specific room on the venue. As far as WordCamp is concerned in Seattle, the venue can be demolished with a wall to merge two rooms!
• Schedule can include free time
  Last-minute cancellations or ultra-short meetings will leave room in the schedule.
• Designed to be customizable with CSS
  WordCamp websites only allow theme settings via CSS.
• Layout can be automatically generated based on CMS content
  Since we are building layouts based on structured conference data on thousands of websites, we cannot rely on any overly clever or customized HTML or CSS.

Start: Stable HTML

Before writing any CSS, I always start with solid HTML.

Top level<div> Will have the <code>.schedule class and serve as the mesh parent element. Each unique start time has its own title followed by all meetings that begin at that time. The markings for each meeting are not important, but make sure you don't need to look at the layout to know when and where the meeting is. (You will understand why later.)

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

  <h3>8:00am</h3>
  <div class="session session-1">
    <h4><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Conference Topics</a></h4>
    8:00am - 9:00am
    Track 1
    Speaker's name</div>


  <h3>9:00am</h3>
  <div class="session session-2">
    <h4><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Conference Topics</a></h4>
    9:00am - 10:00am
    Track 1
    Speaker's name</div>




</div>

Mobile layout and grid fallback are done!

Add some of your own CSS to beautify the page, and our mobile layout and fallback without CSS Grid browser are done!

Here's what it looks like using the color I'm using:

Add grid layout

Now is the actual CSS Grid part!

My moments of inspiration during the construction process came from reading Robin’s article on CSS-Tricks, “Making Bar Charts with CSS Grid.” In short: a grid row represents 1% of the height of the chart, so the number of rows the bar spans is the same as the percentage it represents.

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

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

This made me realize that the grid is perfect for any layout related to some sort of rule incremental unit. In the case of schedule, the unit is time ! In this demo, we will use 30-minute increments, but you can adjust them to your needs. (Just be aware of Chrome's bug, it limits the Grid layout to 1000 rows.)

The first version I tried uses similar syntax and some basic math to put the meetings in a bar chart similar to Robin's. We use eight lines because there are eight 30-minute increments between 8am and 12pm. Remember that implicit grid line numbers start at 1 (rather than 0), so grid lines are numbered from 1 to 9.

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

.session-1 {
  grid-row: 1 / 3; /* 8:00-9:00 am, 3 - 1 = 2 30-minute increments*/
}

.session-2 {
  grid-row: 3 / 6; /* 9:00-10:30 am, 6-3 = 3 30-minute increments*/
}

The downside of this technique is that placing items on a grid with many rows is very abstract and confusing. (This question also adds a lot of complexity to Robin's bar chart demonstration.)

This is where named grid lines come into play! Instead of relying on grid line numbers, we can give each line a predictable name according to the corresponding time.

 .schedule {
  display: grid;
  grid-template-rows:
    [time-0800] 1fr
    [time-0830] 1fr
    [time-0900] 1fr
    [time-0930] 1fr;
    /* etc...
        Note: Use the 24-hour time as the line name*/
}

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

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

This is very easy to understand. There is no need for complex mathematical calculations to determine the number of rows before or after the meeting begins or ends. Even better, we can use the information stored in WordPress to generate gridline names and meeting layout styles. Add the start and end times to the grid and it's OK!

Since there are multiple tracks in the schedule, we need to set up a column for each track. The track works similarly to time, using named track lines for each grid line. There is also an additional first column for the start time title.

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

But here we take the naming grid lines a step further. Each line gets two names: a track that indicates the track that it starts and a track that indicates the end. This is not strictly necessary, but it makes the code clearer, especially when the meeting spans multiple columns.

Once the time and track-based grid lines are defined, we now only need to know the time and track of the meeting to place any meeting!

 .session-8 {
  grid-row: time-1030 / time-1100;
  grid-column: track-2-start / track-3-end; /* Cross two tracks! */
}

Putting all of this together, we get some lengthy but extremely readable code that is very pleasant to use.

 @media screen and (min-width: 700px) {
  .schedule {
    display: grid;
    grid-gap: 1em;
    grid-template-rows:
      [tracks] auto /* Foreshadowing! */
      [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>

The final code uses inline style for meeting placement, which feels right for me. If you don't like doing this and are using a more modern browser, you can pass the line name to CSS via a CSS variable.

Quick description: Use fr units and auto values ??to set the line height

One noteworthy detail is the use of fr units to define row height.

When using 1fr to determine the row height, all rows have the same height. This height is determined by the content of the highest row in the schedule. (I had to read W3C specifications about fr to figure this out!) This produces a nice schedule that is proportional to time, but can also lead to very high layouts.

For example, if your schedule grid uses 15-minute increments from 7 a.m. to 6 p.m., there are 48 grid rows in total. In this case, you may want to use auto as your row height, because the height of each grid row is determined by its content, so the scheduling is more compact.

A sentence about auxiliary functions

Some CSS Grid technologies do have accessibility concerns. Specifically, the ability to visually change the order of information in a way that doesn't match the source order can cause problems for those using keyboard navigation.

This layout uses this feature to place items arbitrarily on the grid, so caution is required. However, since the title and source order align with the visualization of the start time, it seems to me that this seems to be a safe way to use it.

If you are inspired to do something similar, think carefully about accessibility features . In this case, it makes sense to arrange the information in chronological order, but I can imagine a legitimate case where the TAB order is downward rather than horizontal. (Modifying this demo to do this shouldn't be too difficult!)

Whatever you do, always consider accessibility.

Add sticky track name

Finally, it's time to add track names that look like table titles to the top of each column. Since the conference track is already visible, I chose to use aria-hidden="true" to hide the "title" in assistive technology.

The track name is located in the first row grid and is conveniently named "tracks". As long as you don't have any weird overflow issues, position: sticky will keep these names visible while scrolling.

 Track 1
Track 2
Track 3
Track 4

 .track-slot {
  display: none; /* visible only when using Grid layout*/
}

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

This is a clever finishing touches for the final presentation. ?

result

Here is what we've introduced to look like after everything we've put together!

We've just started

This schedule is definitely the most satisfying CSS Grid app I've ever made. I like its "data-driven" and semantic row naming, and the accessibility and CMS requirements are perfectly matched without any inconvenience.

The only remaining question for me is what other types of "data-driven" mesh can be built? I saw some great calendar layouts, and a Monopoly board layout. So what about football stadiums, timelines, dining tables or theater seats? what else?