Let’s Style Everything Else - Chapter 6
➜ Chapter Booklet HERE
Let’s Style Everything Else
Now that you’ve had a chance to work with colors, borders, etc. and styled the navigation bar in our website, it’s time to get to the rest of the document.
We are going to go through and apply styles and rules to the rest of our site. To do that we are going to learn about the grid layout feature which exists in CSS. This will allow us to position our content on our website the way we want. There is so much more to grid, and it represents an advance over what was previously available, but we are going to do a brief introduction and follow up with more specifics in a different course.
Learning the grid layout will help us put to use the sections we set up in an earlier chapter.
CSS Grid Layout
You are already aware that elements can be displayed as block or inline elements. This display property is set by default for most elements, but you can change that (as we have seen with our navigation bar).
The display property actually has many values it can accept—you can even use display:none. Well, the display:grid combination allows us to set up grid areas in our code in order to position content in a specific way.
To do this you first set up a main grid container that encapsulates the content you wish to layout in your grid. You typically use an element like <div>, <main>, <section>, etc. to encapsulate content. Then you put each subsection in it’s own capsule (i.e., using <div>, <section>, etc.).
We did this when we set up containers for the content on our website. Now that we have the containers set up we can begin to layout our content.
In our HTML file our applicable content is contained within <section> elements.
Therefore, in the CSS file we only need to write the rules using either an element as a selector or the appropriate ID or class.
.className {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1.2em;
}
The above declares a grid for the selected class name. Then it designates how many columns should be set up for the content within the grid. 1fr is representative of the fraction of space that’s available for the content. Since we have three sub-divisions in our container, we have set up areas—one for each sub-division.
This will also be the topic of another course because there is so much more you can do with this grid layout feature.