Aligning Nested Clock Elements with CSS Grid
Alright, in this video we are going to add a grid so we can display our div's on here with the hours, minutes, days, seconds on the screen really easily, so we're not two grids in here now.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

So let's go ahead and go to our code, and in our clock.scss let's just go down here bit and let's say display is grid and let's say grid-template-columns because we want to provide some columns. And then we are going to use a function called auto fit, so normally we would do something like

grid-template-columns: repeat(4, 1fr);

and if you save this it will look good.

clock.scss

.clock {
  grid-row: 3/4;
  grid-column: 2/11;

  background: $color-gray-one;
  height: 80%;
  align-self: end;

  -webkit-clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);

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

You will see we have hours minutes seconds.

large

although, there's a problem and it's resizing. When we resize the application it doesn't resize very well, but by using auto fit we can make it resize very well. So let's remove the 4 and put in auto-fit instead. So now when you resize it, it will give it the appropriate width and height.

Now we need to make sure that this is the entire width before this will work. So let's say width on here is 100%, I believe that will fix it, let's try it out. Okay huh, that didn't fix it, so let's go in our grid-template-columns and change it from 1fr to minmax and let's say 150px is the minimum and 275 px is the maximum.

clock.scss

display: grid;
grid-template-columns: repeat(auto, minmax(150px, 275px));

So let's go to our page and lets reload the application, okay so that fixed it.

large

So now when we resize with auto fit, if we had it condensing properly they would shrink down and stack on top of each other, so its like changing the view, so it's like media queries without media queries.

Let me show you how that works, let's go back to our base.scss and let's do this. Let's change the minmax on our grid-template-columns from 150px to 1fr, and then it should work. Let's try it out, okay you can see that it doesn't work. Okay so its not letting us move this because we have some defined widths on these items here.

But basically what auto-fit is going to allow us to do is stack them on top, and this would be working very well if it was the only thing in our application. Now I'm going to change base.scss back to 150px, and I will show you how this works in app.js.

And then up here in our render let's give it a bit of space and then let's just say return clock.

app.js

export default class App extends Component {
  render() {

    return<Clock/>


  }
}

Okay, so this is only going to render the clock because once you run a return in a function it exits it's self out of the function, so this code under our return isn't going to run, it's just going to be our clock.

Now thats a problem because we don't have our grid. So let's cut this and add a div and give it a className of grid and then let's put the clock in there.

app.js

return <div className="grid"><Clock/></div>

Now, let's go to the app and it should be where it belongs. Okay so now let's try resizing it, and again its not going to work because of the way we defined our grid. So let's just get rid of that className and see if it does what we want up here, okay so you get rid of that and that is a perfect example of what we want.

large

So you will see that now it stacks on top of each other if it gets to small. So what I want to do is center these items so that they display properly and then give them some styling and then we will revert back to our grid stuff.

So this is going to be a bit of a longer video I believe, it could end up being shorter then I'm thinking but its going to be longer then normal. So let's close our terminal and get started, let's go into clock.scss and what we want to do in here is basically align our items. So let's say align-items: center;, and justify-items: center;.

Now let's switch over to our application in the browser and it should center them.

large

Now our text align isn't centered so thats why it looks wrong, let's just say text-align: center;, and then let's take a look at our grid in Firefox. And you will see that the grid is perfectly centered even though the grid is not the entire width.

large

So let's see why. Let's hover over this clock and we need to align our grid so let's say justify-content: center;.

clock.scss

.clock {
  grid-row: 3/4;
  grid-column: 2/11;

  background: $color-gray-one;
  height: 80%;
  align-self: end;

  -webkit-clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);

  width: 100%
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 275px));
  align-items: center;
  justify-items: center;

  text-align: center;
  justify-content: center;
}

Okay, so now you can see what is going on here, and let me just the color to white so you can fully understand, or actually let's just throw in the styles of our countdown from our design.

So let's start with the titles, if you remember in clock.js we call these all title, and these all amount.

large

So we can just write it once and it will apply to all of these labels. So let's go to our clock.scss and let's just say &__title and &__amount, and then let's just throw in the code for these now.

So all we have to do is basically, let's put on amount and let's say font size is 90, font weight is bold, and line height is 115px. And then in our title let's say font size is 22px, line height is 25px, and then let's say the color is color-yellow-one.

clock.scss

&__title {
  font-size: 22px;
  line-height: 25px;
  color: $color-yellow-one;
}
&__amount {
  font-size: 90px;
  font-weight: bold;
  line-height: 115px;
}

Now let's go put this color variable into our base.scss and this value is going to be #F7D754.

base.scss

$color-blue-two: #518BDE;
$color-gray-one: #444;
$color-yellow-one: #F7D754;

Okay now let's just go into our amount and let specify the color is white.

clock.scss

&__amount {
  font-size: 90px;
  font-weight: bold;
  line-height: 115px;
}

And then both of these need a font family of roboto condensed.

clock.scss

&__title {
  font-size: 22px;
  line-height: 25px;
  color: $color-yellow-one;
  font-family: "Roboto Condensed";
}
&__amount {
  font-size: 90px;
  font-weight: bold;
  line-height: 115px;
  font-family: "Roboto Condensed";
}

That should give us all over styles for that, and that looks very nice.

large

Now let's just give it a line break, so we can actually do this really easily by saying on each one of these boxes, so if we go into clock.js you'll see that we have seconds, minutes, hours, and days. Now instead of specifying on all of these what we can do is we can just say clock__box and just copy that into each one of these class names.

And then go back into clock.scss and say &__box display is flex, flex-direction is column.

clock.scss

&__box {
  display: flex;
  flex-direction: column;
}

So flex box is a whole different thing, its very close to CSS grid but its actually more limited, CSS grid is more involved then flex box. But basically by doing this we can put them all in there own flex containers and it puts them on their own lines.

large

Okay so now what I was really trying to show you through all this before getting those style in was how this auto fit function works. As you can see this makes it mobile responsive with out really having to do much.

You don't have to add in media queries, you don't have to specify different widths and heights, you can just type in auto-fit and it will do it all for you. So thats really awesome and thats how auto fit works.

So let's go ahead and go back into app.js and let's comment this Clock out, so now it's going to return what we had before. Okay so back in our application we have what we had before, except for now we have all the styles we added in.

large

So really kind of awesome. So what I want to do is just kind of reduce the height on this count down a bit. Let's go into our code and let's just say that height is like 75% in clock.scss, I also want to move this width up near the height.

Then let's move the text-align and put it right under the background and then let's put align-self under grid because technically this is part of the parent grid where as the lower grid items are part of the child grid. So that can get confusing so just make sure you know how that works, and this is pretty clean looking.

clock.scss

.clock {
  grid-row: 3/4;
  grid-column: 2/11;
  align-self: end;

  background: $color-gray-one;
  text-align: center;
  height: 80%;
  width: 100%

  -webkit-clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 275px));
  align-items: center;
  justify-items: center;
  justify-content: center;

  &__box {
    display: flex;
    flex-direction: column;
  }

  &__title {
    font-size: 22px;
    line-height: 25px;
    color: $color-yellow-one;
    font-family: "Roboto Condensed";
  }

  &__amount {
    font-size: 90px;
    font-weight: bold;
    line-height: 115px;
    color: white;
    font-family: "Roboto Condensed";
  }
}

So let's save our application and lets go back to the browser, and our count down is a little more reduced. Feel free to mess around with that so its exactly how you want.

large

And I'm going to add in align self really quick, so we have it at end and that's for the clock. What I'm talking about is align self on each one of these boxes. So what we can do is say align items is center, so let's say align content is center.

clock.scss

align-content: center

Okay, so I'm not sure if that did anything but our countdown clock should be centered now. It doesn't look centered because we cut of the height at the top, so what we can do is we can just say on these boxes we can just say margin top is 10px, and that pushes it down a little bit.

I'm going to mess around with it and give it 24px, and okay that looks good.

large

Now, before we end this let's just finish up some of these styles, I'm going to copy these exact numbers on our design just so we can be sure we are getting in matching styles, so 300, 16, 42, and 22.

Okay so, clock we want to put 300, 16, 42, and 22. Okay that should give us the same numbers, and the next thing I want to do is basically align the text so that it looks normal, or so that it looks like the design to the left here. And then let's change these so they say hours, minutes and seconds in the abbreviated format.

Now let's get that text align to the left on the title, and that looks good. Now to make it look appropriate we're going to have to apply that text align to the left this as well. I don't think that will move it much but if it does it will look better, I'm going to cut out a title and replace it on text align up here.

clock.scss

.clock {
  grid-row: 3/4;
  grid-column: 2/11;
  align-self: end;

  background: $color-gray-one;
  text-align: left;
  height: 75%;
  width: 100%;
}

So that looks much better, it's aligning things really well.

large

Let's go ahead and let's do this, you'll see that it might be to far extended. So what we can do is put more space in between each of our times. So if you go to Firefox and you hit inspect let's look at the grid we have here.

So let's go ahead and select our clock grid rather then our over all grid, and now you will see that we have the clock grid selected. You can change the color if you want to see better, I think red is a good color for grids. Maybe not on that gray color but green looks really good right now.

large

So basically you'll see that we have all this space here in the front and at the end, we want to give it a grid column gap. So let's go to our code and right under the columns let's just say grid column gap is 20px. And let's see what that looks like, it might actually be to much. Okay it was actually to little, you can see here these little column gaps.

large

Which is really awesome, let's go ahead and change our column gap to about 46px, and see what that looks like. Okay let's add in more space, so let's say 80px and that should be a lot.

clock.scss

display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 275px));
grid-column-gap: 80px;
align-items: center;
justify-items: center;
justify-content: center;
align-content: center;

Okay that looks good to me.

large

Let's go ahead and look at this tab and see what it looks like, okay yeah, thats looking pretty nice. Okay let's look at our design and okay it looks like this is just over all more condensed then what we have.

So if we take our application and shrink it up a bit, you will see that it very closely matches our design. So that looks good, although we don't want the clock to be there at the same time we can see the generate countdown button.

So let's go ahead and commit our code and end this video. In the next one we will figure out what we want to do.

Terminal

git status
git add .
git commit -m "styled clock with CSS Grid and detailed styles"

Okay I'll see you in the next video where we will continue building our application and figure out how we can display this component only when we click generate countdown, I'll see you then.

Resources

Source code