Html Question posted in
Some basic documentation can be found here.

Html – CSS GRID: want to put border after each row

I have a problem, I want to put some border after each row but I dont know how to do this, could you help me please (without add 26 div)

.events {
  display: grid;
  grid-template-rows: repeat(26, 30px);
  border-radius: 5px;
  background: var(--calBgColor);
}
<div class="day mon">
  <div class="date">
    <p class="date-num">9</p>
    <p class="date-day">Mon</p>
  </div>
  <div class="events">
    <a href="http://google.com" class="event start-2 end-5 securities">
      <p class="title">Securities Regulation</p>
      <p class="time">2 PM - 5 PM</p>
    </a>
  </div>
</div>

and I want this (with black line) :

enter image description here

thanks guys

Tags:

2

Answers


  1. 0

    Well, adding border in your case you can use border-bottom property, but since you’re using the .events class to define the grid rows, you might want to apply the border to the child elements of .events, but again since you don’t want to add 26 divs, good approach would be targeting children of the .events class, your mentioned HTML structure is showing that each event is contained within an <a> tag, which is again inside the .events div, I’d do it like this:

    .events a {
    border-bottom: 1px solid black; 
    display: block;
}

.events a:last-child {
    border-bottom: none;
}

    Also, this assumes that each row in your grid corresponds to an <a> tag.

    Login or Signup to reply.
  2. 0

    When I have personally coded these before I do include the individual divs due to the amount of content placed in, but this is exactly what you aren’t asking for though.

    If you are looking for a simple solution and you have a fixed height for each day/using absolute for your events (which appears you are), you could use a background image of the dotted lines.

    .calendar {
    width: 100%;
    background-color: #e8e8e8;
    font-family: sans-serif;
    display: flex;
    justify-content: space-between;
}
.day {
    padding: 1rem 0.5rem;
    width: calc(20% - 1rem);
}
.day-title {
    font-size: 2rem;
    font-weight: 300;
    margin: 0 0 0.5rem 0;
}
.day-timeslot-container {
    height: 910px;
    position: relative;
    background-color: #f5f5f5;
    background-image: url('https://phpout.com/wp-content/uploads/2024/01/qvZPA.png');
    background-repeat: repeat;
}
.event {
    position: absolute;
    padding: 0 0.25rem;
    background-color: rgba(203, 255, 192, 0.7);
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 0.5rem);
    color: #000;
    flex-wrap: wrap;
}


/*  Note: 
    * the start/length times are in 30m intervals b/c I didn't know your system and it's what I have personally done in the past
    * 35px = 30m in my example
*/
/* would start at 00:00am */
.start-0 {
    top: 0;
}
/* would start at 00:30am */
.start-1 {
    top: 35px;
}
/* would start at 01:00am */
.start-2 {
    top: 70px;
}
/* would start at 01:30am */
.start-3 {
    top: 105px;
}
/* would start at 05:00am */
.start-10 {
    top: 350px;
}

/* would run for 30m */
.length-30 {
    height: 35px;
}
/* would run for 60m */
.length-60 {
    height: 70px;
}
/* would run for 90m */
.length-90 {
    height: 105px;
}
    <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="">
    </head>

    <body>
        <div class="calendar">
            <div class="day">
                <p class="day-title"><strong>9</strong> Mon</p>
                <div class="day-timeslot-container">
                    <a href="http://google.com" class="event start-2 length-90 securities">
                        <strong>Securities Regulation</strong>
                        <span>2 PM - 5 PM</span>
                    </a>
                </div>
            </div>
            <div class="day">
                <p class="day-title"><strong>10</strong> Tue</p>
                <div class="day-timeslot-container">
                    <a href="http://google.com" class="event start-10 length-60 securities">
                        <strong>Securities Regulation</strong>
                        <span>2 PM - 5 PM</span>
                    </a>
                </div>
            </div>
            <div class="day">
                <p class="day-title"><strong>11</strong> Wed</p>
                <div class="day-timeslot-container"></div>
            </div>
            <div class="day">
                <p class="day-title"><strong>12</strong> Thr</p>
                <div class="day-timeslot-container"></div>
            </div>
            <div class="day">
                <p class="day-title"><strong>13</strong> Fri</p>
                <div class="day-timeslot-container"></div>
            </div>
        </div>
    </body>
</html>

    bg image for hosting

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search