Let's go into our project and let's go to style.scss in our style directory and let's say .home and then let's say display is grid and then let's say grid template columns and then let's say repeat 3 1fr.

main.scss

.home {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Okay, that should be good. And we don't need any other rows so let's just say grid template rows is just 1fr.

main.scss

.home {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
}

Now I'm going to open up Firefox and check it out so I have birthday countdown still running I'm going to reload that, okay inspect the element and you select these

and then the grid you can see our environment so what's it looks like it's not actually working very well that's cuz we don't have any items in it and we haven't specified a width and height so let's go back to our code and lets say on .home the height is 100 view height and the width is 100 view width.

main.scss

.home {
  height: 100vh;
  width: 100vw;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
}

Let's save that go back to our app and you can see that we have three columns now and one row.

Okay cool, so the idea here is we want this My Schedule to contain in the last column, and then this Course Library to contain the first two. Okay so let's go ahead and create these components real quick, lets go into our app and let's go to components and let's create a new folder and I want to call this folder schedule and then I want to create another new folder called library.

Now, in library I'm going to create a new file called library.js and lets just write out our react code so import React, { Component } from 'react'; so all I did was create two folders(schedule + library) and then created a file in library called library.js and then I imported react into library.js.

So I'll type this out slowly so that you can follow along so class Library extends Component, render, return and then we are just going to type out a div. Okay, so divs can have a class name of library, and then we are just going to export it at the bottom.

library.js

class Library extends Component {
    render() {
        return (
            <div className="library">

            </div>
        )
    }
}

export default Library;

Okay, get that all typed in and then copy it let's create a new file in our schedule directory and let's call it schedule.js. Now paste the code from library.js in and change Library to Schedule.

schedule.js

class Schedule extends Commponent {
    render() {
        return (
            <div className="schedule">

            </div>
        )
    }
}

export default Schedule;

so I've got schedule replaced. Make sure you pay attention to the capitalization on these, if its Schedule or schedule makes a big difference.

So these each are going to have an h1, so I'm going to give the schedule a classname of schedule_title and I'm just going to put My Schedule.

schedule.js

class Schedule extends Commponent {
    render() {
        return (
            <div className="schedule">
                <h1 className="schedule__title">My Schedule</h1>
            </div>
        )
    }
}

export default Schedule;

Okay, and the same thing in library.js. I'm going to put h1 class name is library__title and lets just say Course Library

library.js

class Library extends Commponent {
    render() {
        return (
            <div className="library">
                <h1 className="library__title">Course Library</h1>
            </div>
        )
    }
}

export default Library;

Okay, cool. So that should be good, let's go ahead and place these on the grid now. Let's going to our home.js lets hit return after our import React statement and lets import Library from ./library/library and then lets also import Schedule from ./schedule/schedule. Okay, let's put them in here now, so we have got library and we have schedule.

home.js

import React, { Component } from 'react';

import Library from './library/library';
import Schedule from './schedule/schedule';

class Home extends Component {
    render() {
        return (
            <div className="home">
                <h1>Course Scheduler</h1>
                <Library/>
                <Schedule/>
            </div>
        );
    }
}

export default Home;

Sweet, we have Course Scheduler, we have Library and Schedule. So let's get rid of this course scheduler h1 tag, so we just have Library and Schedule.

home.js

import React, { Component } from 'react';

import Library from './library/library';
import Schedule from './schedule/schedule';

class Home extends Component {
    render() {
        return (
            <div className="home">
                <Library/>
                <Schedule/>
            </div>
        );
    }
}

export default Home;

Now, let's go in here(main.scss) and I'm going to show you a cool thing in css. So let's name these. I'm going to get rid of the repeat and I'm going to say 1fr 1fr 1fr.

And then starting at the top of that I'm going to say in brackets here page start[page-s], and then at the very end I'm going to say page end[page-e], and then I'm going to put after the first two 1fr and I'm going to say schedule start[schedule-s], and then I'm going to go to page-e and put schedule-e in front of it.

Then after the second 1fr I'm going to say library-e and then after page-s I'm going to say library-s. Technically we don't even need the page ones, so I'm going to remove them just do decrease the chance of confusion.

So we just have library start to library end and schedule start to schedule end let's make sure library-e and schedule-s are in the same box.

main.scss

.home {
    height: 100vh;
    width: 100vw;

    display: grid;
    grid-template-columns: [library-s] 1fr 1fr [library-e schedule-s] 1fr [schedule-e];
    grid-template-rows: 1fr;
}

Now, we can lay these out with those names instead of numbers. So we can say .library start to library end. Then we can do down and say .schedule grid column schedule start to schedule end.

main.scss

.home {
    height: 100vh;
    width: 100vw;

    display: grid;
    grid-template-columns: [library-s] 1fr 1fr [library-e schedule-s] 1fr [schedule-e];
    grid-template-rows: 1fr;
}

.library {
    grid-column: library-s/library-e;
}

.schedule {
    grid-column: schedule-s/schedule-e;
}

Okay, cool let's go ahead and see if these are on the page now. Awesome, looks good to me. You can't really see that Course Library takes up the whole thing

But if you change the background of library to something like cornflower blue you will be able to see that, and lets change schedules background to crimson.

main.scss

.home {
    height: 100vh;
    width: 100vw;

    display: grid;
    grid-template-columns: [library-s] 1fr 1fr [library-e schedule-s] 1fr [schedule-e];
    grid-template-rows: 1fr;
}

.library {
    grid-column: library-s/library-e;
    background: cornflowerblue;
}

.schedule {
    grid-column: schedule-s/schedule-e;
    background: crimson;
}

Okay cool, you can kind of see what's going on here now. So let's go ahead and get this gradient in, in the next guide. So we build the grid, we build the schedule and library components and we laid them out. So we're going to tackle the gradient next, okay, so let's commit our code. And before we commit it let's just get rid of these background colors, cuz we know what's going on now.

main.scss

.home {
    height: 100vh;
    width: 100vw;

    display: grid;
    grid-template-columns: [library-s] 1fr 1fr [library-e schedule-s] 1fr [schedule-e];
    grid-template-rows: 1fr;
}

.library {
    grid-column: library-s/library-e;
}

.schedule {
    grid-column: schedule-s/schedule-e;
}

Now, lets say git status, git add ., git commit -m and for the commit message I'm just going to say "build library and schedule components and put them on the grid".

Okay cool, I'll go ahead and I will see you in the next video.

Resources

Source code