0

I have a css grid of 5 columns and dynamic rows that I build like this:

  <div className="grid-row-wrapper" key={position} >
                            
         <div className={nextClass} style={nextStyle}> </div>
         <div className="grid-item px-2" style={eventStyle}>{number}</div>
         <div className="grid-item" style={eventStyle}>
          {formattedName[0].toUpperCase()} {formattedName[1]}
         </div>
         <div className="grid-item" style={eventStyle}>{location}</div>
         <div className="grid-item px-1" style={eventStyle}> {time} </div>
 </div>

eventStyle sets the background of that col with a different color if the event is an upcoming event, in order to have the whole row highlighted. The first div is empty because I want that when is an upcoming event(always 3 events) the first column of these 3 events shows a vertical text like "next". Is possible to do so?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Velleda
  • 5
  • 3
  • 3
    It is better to illustrate what you want to achieve in a simple graphical way, this will help you get correct answers much faster. – Tarreq Jun 19 '23 at 18:20

0 Answers0