Responsive meeting schedule template: multi-location timeline design based on CSS Grid

This article introduces a responsive meeting schedule solution built using CSS Grid, which supports dual-mode switching between the desktop (timeline is vertical, locations are arranged horizontally) and mobile (locations are vertical, timeline is horizontal, and can be scrolled horizontally), and natively supports cross-column/cross-row "break period" block layout.

This article introduces a responsive meeting schedule solution built using CSS Grid, which supports dual-mode switching between the desktop (timeline is vertical, locations are arranged horizontally) and mobile (locations are vertical, timeline is horizontal, and can be scrolled horizontally), and natively supports cross-column/cross-row "break period" block layout.

When organizing meetings or events at multiple venues and time periods, a clear, flexible schedule visualization solution that is adaptable to multiple devices is crucial. Traditional implementations based on

• ) lack two-dimensional space control capabilities. CSS Grid, with its explicit row and column definition and range merging capabilities, is ideal for building such dynamic schedules.

  The following is a production-ready streamlined template with the following core logic:

  • Use grid-area to accurately define the starting and ending rows and columns of each block in the grid;
  • Use @media query to distinguish between landscape (desktop) and portrait (mobile) layouts to avoid relying on orientation (this attribute is unreliable in desktop browsers);
  • Enable horizontal scrolling (overflow-x: auto) on the mobile terminal to ensure that the complete content is visible on narrow screens;
  • All blocks use semantic IDs and support accessibility labels (it is recommended to add aria-label and role="region" later).

  ✅ Complete HTML CSS example

   
  
  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meeting Schedule</title>
    <style>
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        line-height: 1.5;
      }
  
      #timetable {
        display: grid;
        width: 100vw;
        min-height: 100vh;
        padding: 1rem;
        gap: 0.75rem;
        /* The default is the mobile layout: location on the left, time on the top*/
        grid-template-rows: repeat(3, 1fr); /* 3 location rows*/
        grid-template-columns: 8rem repeat(12, 1fr); /* The first column is the location, and the last 12 columns are the time slots (such as one grid every 30 minutes) */
        overflow-x: auto;
        scroll-behavior: smooth;
      }
  
      /* Desktop: Change the time to the left and the location to the top*/
      @media (min-width: 768px) {
        #timetable {
          grid-template-rows: 3rem repeat(12, 1fr); /* The first row is the time title, and the last 12 rows are the time slot*/
          grid-template-columns: 6rem repeat(3, 1fr); /* The first column is the time, and the last 3 columns are the location*/
          overflow-x: visible;
        }
      }
  
      /* Public style*/
      .slot {
        padding: 0.75rem;
        border-radius: 0.375rem;
        color: #333;
        font-weight: 500;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
      }
  
      .slot-time, .slot-location {
        background-color: #f1f5f9;
        font-size: 0.875rem;
        font-weight: 600;
        color: #475569;
        display: flex;
        align-items: center;
        justify-content: center;
      }
  
      /* Sample block - can be replaced with real data as needed*/
      #location-a { grid-area: 2 / 1 / 3 / 2; background-color: #e0f2fe; }
      #location-b { grid-area: 3 / 1 / 4 / 2; background-color: #dbeafe; }
      #location-c { grid-area: 4 / 1 / 5 / 2; background-color: #f0fdf4; }
  
      #time-0900 { grid-area: 1 / 2 / 2 / 3; background-color: #f1f5f9; }
      #time-0930 { grid-area: 1 / 3 / 2 / 4; background-color: #f1f5f9; }
      #time-1000 { grid-area: 1 / 4 / 2 / 5; background-color: #f1f5f9; }
  
      #talk-1 { grid-area: 2 / 2 / 3 / 4; background-color: #bfdbfe; }
      #talk-2 { grid-area: 3 / 3 / 4 / 5; background-color: #c7d2fe; }
      #lunch { grid-area: 2 / 4 / 4 / 5; background-color: #fcd34d; } /* span 2 locations*/
      #keynote { grid-area: 2 / 5 / 5 / 6; background-color: #a78bfa; } /* Across 3 locations*/
  
      /*Desktop relocation*/
      @media (min-width: 768px) {
        #location-a { grid-area: 1 / 2 / 2 / 3; background-color: #e0f2fe; }
        #location-b { grid-area: 1 / 3 / 2 / 4; background-color: #dbeafe; }
        #location-c { grid-area: 1 / 4 / 2 / 5; background-color: #f0fdf4; }
  
        #time-0900 { grid-area: 2 / 1 / 3 / 2; background-color: #f1f5f9; }
        #time-0930 { grid-area: 3 / 1 / 4 / 2; background-color: #f1f5f9; }
        #time-1000 { grid-area: 4 / 1 / 5 / 2; background-color: #f1f5f9; }
  
        #talk-1 { grid-area: 2 / 2 / 3 / 3; background-color: #bfdbfe; }
        #talk-2 { grid-area: 3 / 3 / 4 / 4; background-color: #c7d2fe; }
        #lunch { grid-area: 2 / 4 / 4 / 5; background-color: #fcd34d; } /* Across 2 time slots*/
        #keynote { grid-area: 2 / 2 / 5 / 5; background-color: #a78bfa; } /* spans 3 time slots & 3 locations → actually fills the entire area*/
      }
    </style>
  
  
    <div id="timetable">
      <!-- Location title (first column on mobile) -->
      <div id="location-a" class="slot slot-location">Main venue A</div>
      <div id="location-b" class="slot slot-location">Branch venue B</div>
      <div id="location-c" class="slot slot-location">Online meeting room C</div>
  
      <!-- Time title (top row on mobile) -->
      <div id="time-0900" class="slot slot-time">09:00</div>
      <div id="time-0930" class="slot slot-time">09:30</div>
      <div id="time-1000" class="slot slot-time">10:00</div>
      <div id="time-1030" class="slot slot-time">10:30</div>
      <div id="time-1100" class="slot slot-time">11:00</div>
  
      <!--Activity block-->
      <div id="talk-1" class="slot">Keynote Speech: Future Trends</div>
      <div id="talk-2" class="slot">Roundtable Discussion: Technical Practice</div>
      <div id="lunch" class="slot">Lunch &amp; networking</div>
      <div id="keynote" class="slot">Heavy keynote speech</div>
    </div>
  
  

  ⚠️Key Notes

  • Avoid orientation: portrait/landscape media query : This feature is not triggered in desktop browsers, and the behavior is unstable when switching between horizontal and vertical screens on tablets; it is recommended to use min-width (such as 768px) or min-height to determine the viewport unit.
  • Cross-area merging must be explicitly declared : blocks in the Grid that "span multiple columns/multiple rows" (such as coffee breaks, keynote speeches) need to use grid-area: r1 / c1 / r2 / c2 to clarify the scope, and cannot rely on automatic flow layout.
  • Mobile horizontal scrolling experience optimization :
    • Add scroll-behavior: smooth to improve sliding smoothness;
    • Setting overscroll-behavior-x: contain on the container prevents scrolling from penetrating the parent;
    • It is recommended to add flex-shrink: 0 to .slot to prevent the content from being compressed.
  • Accessibility enhancement : Add aria-label to each .slot (such as aria-label="Main Venue A, 09:00–09:30: Keynote Speech"), and wrap the title area with

    .

  ✅ Summary

  With CSS Grid as the core, this solution gets rid of the constraints of table semantics and list layout limitations, and naturally supports two-dimensional space scaling and area merging. At the same time, it achieves true responsive reconstruction through media queries - not only size adaptation, but also logical reorganization of information architecture. Developers can quickly inject real schedule data based on this template (dynamic rendering with JavaScript is recommended), and easily expand it into a complete schedule system that supports advanced functions such as drag-and-drop editing, real-time status marking, and PDF export.

The above is the detailed content of Responsive meeting schedule template: multi-location timeline design based on CSS Grid. For more information, please follow other related articles on the PHP Chinese website!