- Read Tutorial
- Watch Guide Video
So what I want to do is head over to tab-nav.scss.
tab-nav.scss
.tab-nav {
display: grid;
grid-template-rows: [tabs-s] 50px [tabs-e content-s] 1fr [content-e];
&__tabs {
grid-row: tabs-s/tabs-e;
background-color: cornflowerblue;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fill, 1fr);
}
&__tab {
}
}
After we display the grid, we will set columns on auto-fill, and the reason that we're using autofill is we're going to make it so we can apply as many columns and tab items as we want in here. If we just do one, our will be maxed out to only two columns. But we want to be able to use this component wherever we want and maybe have four or five tabs.
Let's go ahead and add in auto-flow so that it will automatically flow into the column axis.
tab-nav.scss
&__tabs {
grid-row: tabs-s/tabs-e;
background-color: cornflowerblue;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fill, 1fr);
grid-auto-flow: column;
}
So saying grid flow on columns will make our items appear on columns instead of rows. So now you can see that you have columns.
So what we need to do now is center that right in their boxes. So you might think that we have to put the tabs over in the center individually, but what we're going to do is justify the content of the entire grid and it's going to kind of shrink it down to the size it needs to be. So once we get the center on the Y-axis we'll do that and we'll do it on the x-axis. We want to get them right in the middle of each of those boxes.
&__tabs {
grid-row: tabs-s/tabs-e;
background-color: cornflowerblue;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fill, 1fr);
grid-auto-flow: column;
justify-items: center;
align-items: center;
}
That should move those in the middle of their areas. All we have to do to center them in the middle of the page is to justify the content.
&__tabs {
grid-row: tabs-s/tabs-e;
background-color: cornflowerblue;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fill, 1fr);
grid-auto-flow: column;
justify-items: center;
align-items: center;
justify-content: center;
}
Now we have to give it a gap so that they're not so close together, because we kind of want them to be spread apart. We can do this really easily by going in here and specifying a grid column gap because we only want it on the column axis.
&__tabs {
grid-row: tabs-s/tabs-e;
background-color: cornflowerblue;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fill, 1fr);
grid-auto-flow: column;
justify-items: center;
align-items: center;
justify-content: center;
grid-column-gap: 4.6rem;
}
As you can see that gives us the gap we need, and it looks good. So now what we need to do is get rid of this cornflower blue color and apply the styles to our actual tabs here.
So let's do that now. We don't have to do that much because some of the styles are already loaded in from our base.scss
.tab-nav {
display: grid;
grid-template-rows: [tabs-s] 50px [tabs-e content-s] 1fr [content-e];
&__tabs {
grid-row: tabs-s/tabs-e;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fill, 1fr);
grid-auto-flow: column;
justify-items: center;
align-items: center;
justify-content: center;
grid-column-gap: 4.6rem;
}
&__tab {
font-size: 1.6rem;
font-weight: 500;
line-height: 2rem;
text-align: center;
width: 9rem;
}
}
Next, we want to get the line at the bottom of these like we have in our design, and I want to give it a little bit of padding because once we put a line underneath these it's not going to look too good. Let me explain to you what I mean. If we put a border on the tab of color-red, since that's going to be like the selected red, it'll be too high. The design has it all the way down with that other line right there. So we have to push it down with padding.
.tab-nav {
display: grid;
grid-template-rows: [tabs-s] 50px [tabs-e content-s] 1fr [content-e];
&__tabs {
grid-row: tabs-s/tabs-e;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fill, 1fr);
grid-auto-flow: column;
justify-items: center;
align-items: center;
justify-content: center;
grid-column-gap: 4.6rem;
border-bottom: 1px solid $color-gray-E6;
}
&__tab {
font-size: 1.6rem;
font-weight: 500;
line-height: 2rem;
text-align: center;
width: 9rem;
// padding-bottom: 2rem;
// border-bottom: 1px solid $color-red-BA;
}
}
So that looks pretty good for now, but we'll comment the second line and padding because we have to get the functionality working for selecting the tabs. Yeah, that's what we'll do in the next video.
git status git add . git commit -m "styled tabs and tab-nav__tabs grid"