- Read Tutorial
- Watch Guide Video
You'll see it's really tall and there's a lot of space in between these items, and our design is not so much like that. Let's start by putting a grid gap in here of 8px on our columns.
Now we could just say margin-right is 8px on the on the number, but I want to show you how grid gap works. Let's close our terminal here, let's close our index.html now, and in our input tab we can say we can say:
main.scss
.input {
display: grid;
// grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
font-family: 'Montserrat';
text-align: center;
grid-column-gap: 8px;
Now in Firefox, if we hit inspect: first thing you'll see is that we have the grid gap now. But when we select one of these inputs you'll see that we have a grid gap right there.
If we were to add more columns, after every column there's going to be this grid gap in between each column. We only have one column, so you can't really tell but that's how it works, and that's where we're getting that gap from. It's going to apply that to every column.
Now let's look at our design, and it looks like there's not much space in between these items here in between the inputs right here. There is a bit of a margin on this input. So what I'd like to do is head to the app here and on the input itself, what I want to say is:
main.scss
.input {
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
text-align: center;
margin: 4px 0;
// width: 190px;
// height: 40px;
}
That's going to apply a margin of 4px to the top and to the bottom. Then this is going to say zero for the left and the right. Now in our application, you'll see that we have a bit of that margin now.
We could also put in padding and it do the same thing. You'll see that the box right there is slightly above this. Now if we did the padding this line would remain down here, except for the text itself in here. When we highlight it, it would be over.
If we were to go in here and say padding and save it and go to our app. Now you get what I'm saying. You see now that when we hover over it, it is kind of within. The padding goes within the margin going outside.
Now what I'd like to do is get rid of the selection color because I think it looks kind of bad. So the input let's say:
main.scss
.input {
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
text-align: center;
padding: 4px 0;
&:focus {
outline: none;
}
// width: 190px;
// height: 40px;
}
One thing I want to do is check this, and you'll see it works. Now on Stack Overflow, just some cool dev tips of what I'd recommend: is that you're active on the site. Part of being active is up voting questions and answers now.
I think that's a good question because I needed it. So I'm going to up vote it, and then obviously this solution worked for me, so I want to up vote it. Now if you do this, it's going to give the person who answered that a reputation on Stack Overflow.
I know people have gotten jobs from Google, or like at Google, just because they have a really good reputation on Stack Overflow. Like that was a big part of why they got their interview at Google, and ultimately got a job.
If I click on my profile you'll see that I have a tiny bit of a reputation. Not enough. Barely any at all, but basically I think this is from one question I answered. It was a super simple one, and I only received 19 votes. You'll see that a question like this receives a lot of rep. This guy probably got 10 rep for every up vote, so he got like 17,000 rep from that. Basically, it's good to be active in this community.
That's really aside from what we're getting at. Now that we have this. I'd like to implement an animation because you'll also see that that fixed that or maybe those are just a Firefox issue. Yeah, it looks like maybe in Firefox we have a border problem. Maybe not.
What we need to do is make it look like it's selected, because you'll see that it's hard to tell which input is selected. Now that box that was on there, belongs there for a reason and that is so we can tell the thing is selected, the input or focus rather.
We need to implement a way to make it look like this is selected. Now we don't have anything in our design, but I think something cool would be to make the color and the underline be green. Let's go into our application here and let's say:
main.scss
.input {
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
text-align: center;
padding: 4px 0;
&:focus {
outline: none;
box-shadow: 0 1px 2px 0 #00CB79;
}
// width: 190px;
// height: 40px;
}
Let's see how that looks. You'll see it applies a little bit of box-shadow. I think that's terrible. That's really ugly though.
What I want to do is...the problem is we put the border on the title here. What we can do is say:
main.scss
.input {
display: grid;
// grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
font-family: 'Montserrat';
text-align: center;
&__title {
grid-column: input-s/input-e;
color: #B3B3B3;
font-size: 12px;
font-weight: 300;
}
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
text-align: center;
padding: 4px 0;
border-bottom: 1px solid #B3B3B3;
&:focus {
outline: none;
box-shadow: 0 1px 2px 0 #00CB79;
}
// width: 190px;
// height: 40px;
}
Then we can go to our app, and it will look almost the same. Yeah, it looks exactly the same, but now what we can do is say:
main.scss
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
text-align: center;
padding: 4px 0;
border-bottom: 1px solid #B3B3B3;
&:focus {
outline: none;
border-bottom: 0 1px 2px 0 #00CB79;
}
// width: 190px;
// height: 40px;
}
Then we'll see how that looks. Let's go in here, and let's click on something. Yeah. You'll see it hovers here. I think that looks kind of ugly still, but we'll just go with it.
I mean we could even just like put it darker or lighter color or a cool blue. I'm not a designer, but I do like designing UI's. What we can do is say:
main.scss
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
text-align: center;
padding: 4px 0;
border-bottom: 1px solid #B3B3B3;
transition: all .3s ease;
&:focus {
outline: none;
border-bottom: 1px solid 0 #00CB79;
}
// width: 190px;
// height: 40px;
}
That will kind of ease the transition, and it will look a lot better. So when you go in here now, it will animate it. We could also increase the height of it a bit. I think that would be good. So say 2px and then we could go in here, and it will grow slightly.
Now that looks all right, but it kind of messes up the button there. What we can do is we can we can do this we can say:
main.scss
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
text-align: center;
padding: 4px 0;
border-bottom: 1px solid #B3B3B3;
margin-bottom: 1px;
transition: all .3s ease;
&:focus {
outline: none;
border-bottom: 1px solid 0 #00CB79;
margin-bottom: 0px;
}
// width: 190px;
// height: 40px;
}
That will make up for that additional pixel. While it does, it goes back, but it's that it's animating over and that's why it looks bad. Let's just get rid of margin-bottom: 0px;, and let's just make this 1px, and we'll leave it at that.
So just to indicate that we are selected, we're not going to change the height because it's going to ruin the height of this. So we'll just leave that. But I think that looks good. So we're good there.
Now what we need to do is pull it up on the grid a bit more, because it's too far apart. These are all too far apart. If we inspect the element and go to our grids here, and we select the cards inputs will see that these are all way too big.
What we need to do is see the height of these in our design, and then put them over. Let's see, so we have about 40px here and then this is about 32px or so, or 15px high. We can say roughly that it's about 80px high. A rough guess. It won't look too off if it isn't exactly 80px, but we can just say that it's 80px.
One thing that's really bothering me is these circles, don't really look like circles. We need to specify the that they are 26 by 26. So let's go to our app here and let's go to the number and let's say:
main.scss
&__number {
grid-column: number-s/number-e;
background-color: #00CB79;
color: white;
font-size: 20px;
line-height: 24px;
padding-top: 3px;
height: 26px;
width: 26px;
border-radius: 50%;
}
Now with that, if we go to our application and you'll see that they are now circles. Which looks a lot better. That means we can probably animate our border bottom now. This is going to be a jump to so I'm going to say:
main.scss
input {
grid-column: input-s/input-e;
border: none;
font-size: 15px;
text-align: center;
padding: 4px 0;
border-bottom: 1px solid #B3B3B3;
margin-bottom: 1px;
transition: all .3s ease;
&:focus {
outline: none;
border-bottom: 3px solid 0 #00CB79;
}
// width: 190px;
// height: 40px;
}
Let's try looking at that. It's still kind of glitchy looking. So it lets you change it to 1px. I don't why it keeps opening new files. It's probably really confusing to you guys. Sorry about that. So let's put in 1px. Then I'm going to close this side tag using command + b.
Back to what we were doing, let's make these inputs have a height of 80px, but we want to do that on the input tag here, so let's say:
main.scss
.input {
display: grid;
// grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
font-family: 'Montserrat';
text-align: center;
grid-column-gap: 8px;
height 80px;
What we want to do is check this out right here. That looks good, except for it's a little too big. Maybe let's select one of these inputs. Yeah it's too big. So what we do is we know this circle is 26px right? In our design, if we know it's 26px: we can say 30px to kind of round it to more right here. We can actually see it 4px, which is 30px or 26 plus the 4px gap is about 30px.
Then this is about 15px and then it's 2px so that's 17px right. So we can easily say that this is 30 plus 17. These are 47px size. We can go in here and say:
main.scss
.input {
display: grid;
// grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: [number-s] 26px [number-e input-s] 1fr [input-e];
font-family: 'Montserrat';
text-align: center;
grid-column-gap: 8px;
height 47px;
That will look a lot better. That looks really good. Now you'll see that in Firefox when we inspect the element, select one of these inputs, and we will see that these are 47px.
When we have the card inputs grid selected, what we can do is: we can specify that these are 47px high columns or rows. We can go to our app here, and we need to do this. We need to go to our inputs. Instead of saying 1fr, we want to simply say:
main.scss
.card {
min-height: 736px;
max-height: 994px;
width: 1240px;
box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
border-radius: 7px;
display: grid;
grid-template-rows: 1fr 50px;
background-color: white;
&__inputs {
// background-color: skyblue;
display: grid;
grid-template-rows: repeat(4, 27px);
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: center;
}
}
Now this isn't going to look entirely good. It's going to crush them all together because we have a space in between. In our app, it crushes them all together which looks terrible, but what we can do is now specify a grid-row-gap. which is about 60px so let's go to our code here and let's say
main.scss
.card {
min-height: 736px;
max-height: 994px;
width: 1240px;
box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
border-radius: 7px;
display: grid;
grid-template-rows: 1fr 50px;
background-color: white;
&__inputs {
// background-color: skyblue;
display: grid;
grid-template-rows: repeat(4, 27px);
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 60px;
justify-items: center;
align-items: center;
}
}
That's going to add a 60px gap in between all of our inputs, and that looks pretty nice so let's close this. That looks good, except for it's way too close to the top, so we need to find a way we can push those down. We inspect the element and select our card.
Okay, so we just need to put a either another row in our card or a margin top or something. So let's go and do that. Let's see. We have our input here. It's about 66px from the top. Let's go in here, and let's say:
main.scss
.card {
min-height: 736px;
max-height: 994px;
width: 1240px;
box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
border-radius: 7px;
display: grid;
grid-template-rows: 1fr 50px;
background-color: white;
&__inputs {
// background-color: skyblue;
display: grid;
grid-template-rows: repeat(4, 27px);
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 60px;
margin-top: 66px;
justify-items: center;
align-items: center;
}
}
Let's see what that gets us. That looks nicer. One thing I noticed is that these inputs do look a bit close still. What we can do is just increase that row gap let's say 120px, then let's go to our app and see what it looks like. Yeah, that looks really good.
Now we need to add in a margin on the left here. You'll see that right here we have about 83px so let's add that in. Let's go here and say:
main.scss
.card {
min-height: 736px;
max-height: 994px;
width: 1240px;
box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
border-radius: 7px;
display: grid;
grid-template-rows: 1fr 50px;
background-color: white;
&__inputs {
// background-color: skyblue;
display: grid;
grid-template-rows: repeat(4, 27px);
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 120px;
margin-top: 66px;
margin-left: 83px;
justify-items: center;
align-items: center;
}
}
Now, that might not work because of the way we have our grid set up, but let's try it out. It looks like it works except for you'll see that now on the right here we have a problem. That's because these are all specified. This is a specific width. So it's pushing it over. Oh, and we don't have it on the right. What we can say is:
main.scss
.card {
min-height: 736px;
max-height: 994px;
width: 1240px;
box-shadow: 0 4px 30px 0 rgba(0,0,0,.06);
border-radius: 7px;
display: grid;
grid-template-rows: 1fr 50px;
background-color: white;
&__inputs {
// background-color: skyblue;
display: grid;
grid-template-rows: repeat(4, 27px);
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 120px;
margin-top: 66px;
margin-left: 83px;
margin-right: 83px;
justify-items: center;
align-items: center;
}
}
We can see if that works. That works great. Now that looks good, so that's it for our inputs.
In the next guide, we will learn how we can kind of put this Generate Madlibs button up here, and then put in this. After that, we'll go on from here. Let's commit our code. Let's go to our app here, and let's hit command + j to open ip our terminal. Let's say git status, git add ., and let's say git commit -m "styled input grid". Okay, I'll see you in the next guide.