HTML and CSS Reference
In-Depth Information
padding for any element with the class of
container
by moving it into a new,
separate rule set.
5.
All right—all of the heavy lifting needed to get our reusable grid styles into place
is finished. Now it's time to work in our HTML and to see how these classes per-
form.
We'll begin with the teasers on the home page, within our
index.html
file,
aligning them into three columns. Currently, the teasers are wrapped in a
<sec-
tion>
element with the class of
container
. We'll want to change that class
from
container
to
grid
so that we can begin placing columns within it.
1.
<section
class="grid"
>
2.
...
3.
</section>
6.
Next, we'll want to add a class of
col-1-3
to each of the
<section>
elements
within the
<section>
element with the class of
grid
.
1.
<section class="grid">
2.
3.
<section
class="col-1-3"
>
4.
...
5.
</section>
6.
7.
<section
class="col-1-3"
>
8.
...
9.
</section>
10.
11.
<section
class="col-1-3"
>
12.
...
13.
</section>
14.
15.
</section>
7.
And lastly, because each of our columns is an inline-block element, we'll want to
make sure we remove the empty white space between them. We'll use comments
to do this, and we'll add a little bit of documentation noting each upcoming section
while we're at it to better organize our code.
1.
<section class="grid">
2.
3.
<!-- Speakers -->
Search WWH ::
Custom Search