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.
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) {
}