How to overlap the child element of a grid item to the next column?

Question

So, i want to build a calendar, which displays the current month. So I build the calender with an css grid. Now i want to add events, which could durate longer than a day(a is a grid item). The problem I face now, is that the div element, which should display my event, is the child element of the grid item, so I can't just add grid-column: span 2; to adjust the length of the event over multiple days. How can a child of the grid-item (which is the day of the month) can overlap to the next calendar day?

Edit: To turn up the width to 200% would be a solution,but then the event of the next day wouldn't align with the current event. At the latest, at window resize, those two lines wouldn't line up anymore.

I made a quick mock of my project to show the problem more visually: https://codepen.io/eliasroebl/pen/yLMXOwy

.calendar__week,
.calendar__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar__week {
  grid-auto-rows: 6vw;
  text-align: right;
}

.different_month_days{
  background-color: #c1d5e0;
}


.event{
  grid-column: col 2 / span 4;
  grid-row: 2;
  background-color: aqua;
  border-radius: 5vw;
  text-align: left;
}



.calendar__header {
  grid-auto-rows: 3vw;
  align-items: center;
  text-align: center;
  font-family: Montserrat;
  background-color: #8f9bff;

}

.calendar__day {
  padding: 16px;
  font-family: Montserrat;
}

.calendar {
  background-color: white;
  border: 1px solid #e1e1e1;
}

.calendar__header > div {
  text-transform: uppercase;
  font-size: 1em;
  font-weight: bold;
}

.calendar__day {
  border-right: 1px solid  #e1e1e1;
  border-top: 1px solid #e1e1e1;

}

.calendar__day:last-child {
  border-right: 0;
}

Thanks already for the help

user_10347145 · Answer

Here you go...

Inspired by this codepen.

I changed the code a little bit and made it more responsive because the source code on codepen wasn't responsive at all. Colorful boxes and all the text (days of the week, numbers and event text) are now responsive.

I solved your main problem with events not aligning when resizing the window. The events now align perfectly regardless of the window size.

For example, the first event with class='event--1' starts at the third box and is spread across the next two boxes which is done with grid-column: 3 / span 2;. The second event with class='event--2' starts at the fourth box and is spread across the next three boxes which is done with grid-column: 4 / span 3;.

But you also have to put these boxes which have assigned events kind of "back into place". For the fifteenth box this is done with the following CSS:

div.date:nth-child(15) {
  grid-column: 3;
  grid-row: 3;
}

Try to delete this from the CSS and you will get the point.

Also, I used a little bit of Bootstrap 5 to be able to vertically align days of the week.

.days {
  font-size: 1.2vw;
  height: 8vh;
  font-weight: 700;
}

.main-content {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: repeat(4, 35vh);
  grid-template-columns: repeat(7, minmax(calc(100vw/7), 1fr));
}

.date {
  background: var(--color);
  padding: 4%;
  position: relative;
  font-size: 1.3vw;
}

.event {
  z-index: 10;
  background: transparent;
  height: 10%;
  padding-top: 2.3vw;
}

.event--1 {
  grid-column: 3 / span 2;
  grid-row: 3;
}

.event--2 {
  grid-column: 4 / span 3;
  grid-row: 3;
  padding-top: 6vw;
}

.event__name {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10vw;
  height: 2.5vh;
  padding: 10px;
  margin: 10px;
  font-size: 0.9vw;
}

div.date:nth-child(15) {
  grid-column: 3;
  grid-row: 3;
}

div.date:nth-child(16) {
  grid-column: 4;
  grid-row: 3;
}

div.date:nth-child(17) {
  grid-column: 5;
  grid-row: 3;
}

div.date:nth-child(18) {
  grid-column: 6;
  grid-row: 3;
}





  
  
  
  Document
  




  
    Monday
    Tuesday
    Wednesday
    Thursday
    Friday
    Saturday
    Sunday
  

  
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    
      Valentines party with Ames ❤️
    
    
      Die Hard binge weekend

user_13520358 · Answer

First of all you shouldve used a table make this ,anyways here is what you should do change the event css like this

.event{
  grid-column: col 2 / span 4;
  grid-row: 2;
  background-color: aqua;
  border-radius: 5vw;
  text-align: left;
  position:relative;
  z-index:1;
}

and then lets say you want a particular event to go on for 2 days then use this,


        Event 1

width will be 100 * no of days this is how it looks now hope this answers your question

How to overlap the child element of a grid item to the next column?

2 Answers