- [Chris] Hi, this is Chris Converse, and in this episode,
we'll create a grid layout within our content
by reassigning HTML elements to display as a table,
without actually using a table in the page.
Then we'll remove those table properties,
allowing us to reconfigure the layout for small screens.
So if you'd like to follow along with me,
download the exercise files, and let's begin
by opening index.html in a text editor.
And once you have the HTML file open, up in the head area,
you'll see we have a link to style.css,
which we'll open in a few minutes.
Inside of the body area, we have a main article element.
Inside of the article element is an h1,
a paragraph, and a section element.
It's this section element that we're going to
convert into a table, and we're going to make
all of the div elements, there are four inside of here,
into the individual table cells.
So, the first thing we'll need to do in the HTML
is group these so that we can create rows
out of these individual divs.
So what we're going to do is add a div tag
around the first two divs, and a second div tag
around the second two divs.
So let's get our cursor before the first div.
I'll hit a return.
I'll tab in here, add a beginning div tag.
Then the next two divs, I'm going to tab these in,
just to indent them.
And then, after the first two divs,
we're going to end the div we just added.
Next line, let's add another div.
Let's indent the next two divs.
And then we'll close that second div.
So now, we have, inside of our section element,
one div that contains the two original divs
we started with, and a second div here,
which contain the third and fourth divs we started with.
And so, with this in place, let's save our HTML.
Let's open the index.html in a browser,
just to see what we're starting with.
And now, in the browser, you can see
the section element here.
I've already added a white border
and a 10% white background to this,
but you can see all of the divs stacking up here.
And so, now, let's go back to the exercise files.
Let's find style.css.
Let's open this in our text editor.
Let's scroll down.
You can see I have some rules in place.
The first rule we're going to change
is going to be this section selector, down here on line 31.
So after background-color, let's come in here
and add another property.
We're going to set the property of display,
and we're going to set this to a table.
So now, with this section element set
to display as a table, let's scroll down.
After the paragraph element that's being targeted
inside of this section, let's hit a few returns,
before the media query, and let's target
the first set of divs that are inside of this section.
So we'll do that by typing section,
then a space, then a greater than sign, then div.
And so, this will only target the first two divs
in that section, which are the divs
that we use to group divs one and two and three and four.
Then let's add in our brackets.
Let's split this open.
And let's first set text-align to center.
And then, next, let's set a display type.
And we're going to set these to a table-row.
Let's save our work.
If we go back to the browser, we won't see
anything different, except for the fact
that the text is being centered.
So, back in the CSS.
After that section, greater than sign, div,
let's come in here and target the divs
that are inside of those top-level divs.
So, section, space, greater than, div,
then a space, then another div.
Put in our brackets.
Let's come in here and let's set
a display type of table-cell.
So with that in place, if you save your CSS
and go back to the browser, we'll now see
that the content is rendering inside of a grid.
Now, to visually illustrate what's going on here,
we started with a section element,
and that had four divs inside of it.
We then grouped those inner divs
into two sets of additional divs.
Then, in our CSS, we set the section element
to display as a table.
The immediate divs are set to table rows,
and the divs inside of those divs
are set to display as table cells,
resulting in a two-by-two table, giving us a grid layout.
So now, back in our CSS, let's continue
styling our table cells.
So, on the next line, let's set a width.
We're going to set these to 50%.
Next, we'll set a padding property
to 15 pixels on all four sides.
Then, on the next line, let's set a border-left.
We're going to set this to one pixel for the size,
solid for the style, and then white for the color.
So, a pound sign and three Fs.
And then, I also want to set border-bottom.
So I'm going to duplicate the border-left,
and then change this border-bottom.
So with that in place, we'll hit Save.
You'll notice in the browser now that we have
a doubling of our border on the left and bottom here,
because I have a border on the section element,
and the cells inside on the left and bottom
also have a left and bottom border.
So let's come back to our CSS,
and let's turn off the left border
and bottom border for specific divs.
So let's start by targeting section, greater than sign, div,
space, div, then a colon.
Let's target the first child.
Put in our brackets.
So, for the first child, we're going to set border-left
to none.
Then we'll come in here, select this entire rule.
Paste the rule down here.
Now, let's come in here and select the :first-child.
Let's cut that from the div that's inside of the main div,
and let's add it to the main div,
and let's change first to last.
Then we'll come down and change
border-left to border-bottom.
With those in place, let's hit Save.
Let's go back to the browser.
We'll now see that the first child
no longer has a border on the left,
and the divs in the last child of the first set of divs
no longer have a border on the bottom.
So now we have an even one pixel border
around the entire element, and a one pixel border
dividing all of the cells inside.
So now, with our grid created,
let's remove the grid properties
when our screen gets too small.
So I have a media query in here
for when the screen is under 600 pixels.
So I'll change the width here in my browser
to be less than 600 pixels.
Let's come back to our CSS.
I have a media query in here which is targeting
a max width of 600.
Let's add some returns inside.
And inside of the media query,
let's start by targeting the main section.
So we'll type section, put in our brackets.
For the main section, we're going to set border-bottom to none.
That's going to take out the border on the main element here.
Back to our CSS.
Next, we're going to target the divs
that are immediately inside of this section element.
So, section, space, greater than, div.
Put in our brackets.
For these items, we're going to set the display type to inline.
Then, on the next line, we're going to target
all of the divs that we're using as table cells.
So, section, greater than, div, space, div.
Put a space.
Let's add our brackets.
Let's give ourselves some room.
First property is going to be the width.
And we're going to set this to inherit.
This is going to override the 50% width we added earlier.
Next property, we're going to set the display type to block.
Next property, we're going to set border-left.
We're going to set this to none.
Next line, we're going to set border-bottom.
We're going to set this to one pixel.
Solid, with a color of white.
So a pound sign and three Fs.
Then, finally, we'll set the text-align to left.
Scroll up here a little bit.
Save your CSS.
Let's go over to the browser.
Let's hit reload.
We can see all of our styles taking effect.
We do see that the last two divs
in the last-child main div do not have the border bottom,
because we overrode those earlier.
So, again, back to our CSS.
Let's add one final rule.
We'll type section, greater than, div,
colon, last-child,
space, div.
Put in our brackets.
Let's split this open.
And we need to add our border-bottom property back in.
So let's come up here and copy it
from the divs inside of the main divs.
Let's paste it down here.
Hit Save, go back to the browser.
And now, the two divs inside of the last-child main div
have border bottoms as well.
So now, we have a section of our content
displaying in a grid on larger screens
using table display properties
without using table elements in our HTML file,
allowing us to rearrange the layout for small screens.
And so, with that, I'll conclude this episode,
and, as always, thanks for watching.