HTML CSS Program Overview Template (Grid, Scrollable)

Question

We are programming a website for our event. There is a program in the form of a timetable. There are 3 locations in which different events take place.

In the desktop version the locations should be on top and the time on the left. In the mobile version the locations should be on the left and the times on the top. You should be able to scroll sideways. Between the events there are breaks, so the break block must run over several locations.

Does anyone know such a template? Preferably built with a grid system. Design Screenshot

Thank you for your help.

We have already tried several templates for example this one: Timetable Template

However, we have the problem that we can not drag the breaks over several blocks, because it is built with lists.

Please provide enough code so others can better understand or reproduce the problem. — Community, May 09 '23 at 15:33

score 0 · Accepted Answer · answered May 09 '23 at 10:07

with css grid, could be achieved like that:

body {
  margin: 0;
  padding: 0;
}

#grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  width: 100vw;
  height: 100vh;
}

@media (orientation: landscape) {
  #location {
    grid-area: 1 / 1 / 4 / 13;
    background-color: rgba(40, 174, 181, 0.5);
  }
  #event1 {
    grid-area: 4 / 1 / 13 / 4;
    background-color: rgba(223, 210, 166, 0.5);
  }
  #breakfast {
    grid-area: 4 / 4 / 13 / 5;
    background-color: rgba(223, 239, 48, 0.5);
  }
  #event2 {
    grid-area: 4 / 5 / 8 / 9;
    background-color: rgba(203, 167, 85, 0.5);
  }
  #event3 {
    grid-area: 4 / 9 / 8 / 13;
    background-color: rgba(72, 210, 57, 0.5);
  }
  #break {
    grid-area: 8 / 5 / 9 / 13;
    background-color: rgba(95, 40, 159, 0.5);
  }
  #event4 {
    grid-area: 9 / 5 / 13 / 9;
    background-color: rgba(186, 150, 134, 0.5);
  }
}

@media (orientation: portrait) {
  #location {
    grid-area: 1 / 1 / 13 / 4;
    background-color: rgba(40, 174, 181, 0.5);
  }
  #event1 {
    grid-area: 1 / 4 / 4 / 13;
    background-color: rgba(223, 210, 166, 0.5);
  }
  #breakfast {
    grid-area: 4 / 4 / 5 / 13;
    background-color: rgba(223, 239, 48, 0.5);
  }
  #event2 {
    grid-area: 5 / 4 / 9 / 8;
    background-color: rgba(203, 167, 85, 0.5);
  }
  #event3 {
    grid-area: 5 / 9 / 9 / 13;
    background-color: rgba(72, 210, 57, 0.5);
  }
  #break {
    grid-area: 5 / 8 / 13 / 9;
    background-color: rgba(95, 40, 159, 0.5);
  }
  #event4 {
    grid-area: 9 / 4 / 13 / 8;
    background-color: rgba(186, 150, 134, 0.5);
  }
}

<div id="grid">
  <div id="location">location</div>
  <div id="event1">event1</div>
  <div id="breakfast">breakfast</div>
  <div id="event2">event2</div>
  <div id="event3">event3</div>
  <div id="break">break</div>
  <div id="event4">event4</div>
</div>

I put the media break landscape portrait, but you can either put them with values:

@media (min-width: 48em) {

} @media (min-width: 62em) {

}

HTML CSS Program Overview Template (Grid, Scrollable)

1 Answers1