What are the steps to design a schedule with CSS Grid?

Question

What are the steps to design a schedule with CSS Grid?

I am attempting to replicate the image shown below using CSS grid, but I am having trouble figuring out how to create elements that span multiple columns.

https://i.sstatic.net/x8uyM.png

Here is the current code I have:

    <div class="Grid">
        <div class="Grid-Column">
            <div class="column">1</div>
            <div class="column">2</div>
            <div class="column">3</div>
            <div class="column">4</div>
            <div class="column">5</div>
            <div class="column">6</div>
        </div>;

        <div class="Grid-Rows">
            <div class="row">Monday</div>
            <div class="row">Tuesday</div>
            <div class="row">Wednesday</div>
            <div class="row">Thursday</div>
            <div class="Row">Friday</div>
        </div>;

        <div class="Grid-Element">
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>E</div>
            <div>F</div>
        </div>;
    </div>

html css dom flexbox css-grid

Answer 1

Answer №1

I'm not certain if this approach is the most effective, but give it a try:

.Container {
  width: 700px;
  height: 500px;
  border: 2px solid red;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.Monday {
  grid-row-start: 2;
  grid-row-end: 3;
}

.Tuesday {
  grid-row-start: 3;
  grid-row-end: 4;
}

.Wednesday {
  grid-row-start: 4;
  grid-row-end: 5;
}

.Thursday {
  grid-row-start: 5;
  grid-row-end: 6;
}

.Friday {
  grid-row-start: 6;
  grid-row-end: 7;
}

.a {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 5;
}

.b {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 7;
  grid-column-end: 8;
}

.c {
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 4;
  grid-column-end: 5;
}

.d {
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 5;
  grid-column-end: 6;
}

.e {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 2;
  grid-column-end: 3;
}

.f {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 5;
  grid-column-end: 7;
}

<div class="Container">
  <div></div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>

  <div class="Monday">Monday</div>
  <div class="Tuesday">Tuesday</div>
  <div class="Wednesday">Wednesday</div>
  <div class="Thursday">Thursday</div>
  <div class="Friday"></div>

  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

Answer 2

I'm not certain if this approach is the most effective, but give it a try:

.Container {
  width: 700px;
  height: 500px;
  border: 2px solid red;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.Monday {
  grid-row-start: 2;
  grid-row-end: 3;
}

.Tuesday {
  grid-row-start: 3;
  grid-row-end: 4;
}

.Wednesday {
  grid-row-start: 4;
  grid-row-end: 5;
}

.Thursday {
  grid-row-start: 5;
  grid-row-end: 6;
}

.Friday {
  grid-row-start: 6;
  grid-row-end: 7;
}

.a {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 5;
}

.b {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 7;
  grid-column-end: 8;
}

.c {
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 4;
  grid-column-end: 5;
}

.d {
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 5;
  grid-column-end: 6;
}

.e {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 2;
  grid-column-end: 3;
}

.f {
  grid-row-start: 5;
  grid-row-end: 6;
  grid-column-start: 5;
  grid-column-end: 7;
}

<div class="Container">
  <div></div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>

  <div class="Monday">Monday</div>
  <div class="Tuesday">Tuesday</div>
  <div class="Wednesday">Wednesday</div>
  <div class="Thursday">Thursday</div>
  <div class="Friday"></div>

  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="e">E</div>
  <div class="f">F</div>
</div>

What are the steps to design a schedule with CSS Grid?

Answer №1

Similar questions

Designing an HTML and CSS footer navigation bar

Looking to incorporate Bootstrap Icons within Semantic UI?

There seems to be an error with JVectorMap: the <g> attribute transform is expecting a number but is instead receiving "scale(NaN) translate(N..."

Exploring MVC 5's View and Controller Components

I'm having a hard time understanding how to use array_filter()

Show the updated count retrieved from a specific record in a database table using Ajax technology

Ways to center text vertically alongside an image

How to hide offcanvas navigation bar with one click in Bootstrap 5

The navigation bar vanishes as soon as I click the Modal button

What is the best way to ensure all class=service-block elements have the same height?

Utilizing Angularjs for dynamic data binding in HTML attributes and style declarations

Using a CSS pseudo-element within a PHP script does not produce the desired results

Steps on how to trigger an onmouseover event for entire blocks of text:

The wrapAll() method can be used to wrap list items within two columns

Exclude a specific link from a JQuery function

Changing the selection of a ComboBox in WebDriver using the "webkit-user-select" attribute

Issue arises when attempting to submit multiple form fields with identical 'name' attributes, preventing the fields from being posted

Prevent Fixed Gridview Header from being affected by browser Scroll-bar using JQuery

The value returned by $(this).next() is undefined

Utilize PHP to Extract ID3 Tags from MP3 Files and Embed Them into HTML