1
00:00:01.03 --> 00:00:03.05
- [Chris] Hi, this is Chris
Converse, and in this episode,

2
00:00:03.05 --> 00:00:05.07
we'll create a grid
layout within our content

3
00:00:05.07 --> 00:00:08.09
by reassigning HTML elements
to display as a table,

4
00:00:08.09 --> 00:00:11.04
without actually using
a table in the page.

5
00:00:11.04 --> 00:00:13.00
Then we'll remove those table properties,

6
00:00:13.00 --> 00:00:16.00
allowing us to reconfigure
the layout for small screens.

7
00:00:16.00 --> 00:00:17.06
So if you'd like to follow along with me,

8
00:00:17.06 --> 00:00:19.07
download the exercise
files, and let's begin

9
00:00:19.07 --> 00:00:24.01
by opening index.html in a text editor.

10
00:00:24.01 --> 00:00:26.08
And once you have the HTML
file open, up in the head area,

11
00:00:26.08 --> 00:00:29.05
you'll see we have a link to style.css,

12
00:00:29.05 --> 00:00:32.00
which we'll open in a few minutes.

13
00:00:32.00 --> 00:00:35.05
Inside of the body area, we
have a main article element.

14
00:00:35.05 --> 00:00:37.06
Inside of the article element is an h1,

15
00:00:37.06 --> 00:00:40.00
a paragraph, and a section element.

16
00:00:40.00 --> 00:00:41.05
It's this section element
that we're going to

17
00:00:41.05 --> 00:00:43.07
convert into a table,
and we're going to make

18
00:00:43.07 --> 00:00:46.06
all of the div elements,
there are four inside of here,

19
00:00:46.06 --> 00:00:49.06
into the individual table cells.

20
00:00:49.06 --> 00:00:51.04
So, the first thing we'll
need to do in the HTML

21
00:00:51.04 --> 00:00:54.00
is group these so that we can create rows

22
00:00:54.00 --> 00:00:56.00
out of these individual divs.

23
00:00:56.00 --> 00:00:57.07
So what we're going to do is add a div tag

24
00:00:57.07 --> 00:01:01.00
around the first two
divs, and a second div tag

25
00:01:01.00 --> 00:01:03.02
around the second two divs.

26
00:01:03.02 --> 00:01:05.05
So let's get our cursor
before the first div.

27
00:01:05.05 --> 00:01:08.04
I'll hit a return.

28
00:01:08.04 --> 00:01:12.06
I'll tab in here, add a beginning div tag.

29
00:01:12.06 --> 00:01:15.06
Then the next two divs,
I'm going to tab these in,

30
00:01:15.06 --> 00:01:18.01
just to indent them.

31
00:01:18.01 --> 00:01:19.06
And then, after the first two divs,

32
00:01:19.06 --> 00:01:22.07
we're going to end the div we just added.

33
00:01:22.07 --> 00:01:27.02
Next line, let's add another div.

34
00:01:27.02 --> 00:01:32.07
Let's indent the next two divs.

35
00:01:32.07 --> 00:01:35.01
And then we'll close that second div.

36
00:01:35.01 --> 00:01:38.03
So now, we have, inside
of our section element,

37
00:01:38.03 --> 00:01:41.07
one div that contains
the two original divs

38
00:01:41.07 --> 00:01:44.05
we started with, and a second div here,

39
00:01:44.05 --> 00:01:48.00
which contain the third and
fourth divs we started with.

40
00:01:48.00 --> 00:01:50.04
And so, with this in
place, let's save our HTML.

41
00:01:50.04 --> 00:01:52.06
Let's open the index.html in a browser,

42
00:01:52.06 --> 00:01:54.08
just to see what we're starting with.

43
00:01:54.08 --> 00:01:55.07
And now, in the browser, you can see

44
00:01:55.07 --> 00:01:57.05
the section element here.

45
00:01:57.05 --> 00:01:58.09
I've already added a white border

46
00:01:58.09 --> 00:02:01.07
and a 10% white background to this,

47
00:02:01.07 --> 00:02:04.08
but you can see all of
the divs stacking up here.

48
00:02:04.08 --> 00:02:07.00
And so, now, let's go back
to the exercise files.

49
00:02:07.00 --> 00:02:08.06
Let's find style.css.

50
00:02:08.06 --> 00:02:12.01
Let's open this in our text editor.

51
00:02:12.01 --> 00:02:13.05
Let's scroll down.

52
00:02:13.05 --> 00:02:15.05
You can see I have some rules in place.

53
00:02:15.05 --> 00:02:16.09
The first rule we're going to change

54
00:02:16.09 --> 00:02:20.06
is going to be this section
selector, down here on line 31.

55
00:02:20.06 --> 00:02:22.04
So after background-color,
let's come in here

56
00:02:22.04 --> 00:02:24.04
and add another property.

57
00:02:24.04 --> 00:02:27.01
We're going to set the
property of display,

58
00:02:27.01 --> 00:02:30.03
and we're going to set this to a table.

59
00:02:30.03 --> 00:02:31.06
So now, with this section element set

60
00:02:31.06 --> 00:02:34.04
to display as a table, let's scroll down.

61
00:02:34.04 --> 00:02:36.08
After the paragraph element
that's being targeted

62
00:02:36.08 --> 00:02:39.09
inside of this section,
let's hit a few returns,

63
00:02:39.09 --> 00:02:42.02
before the media query, and let's target

64
00:02:42.02 --> 00:02:46.05
the first set of divs that
are inside of this section.

65
00:02:46.05 --> 00:02:48.01
So we'll do that by typing section,

66
00:02:48.01 --> 00:02:53.01
then a space, then a
greater than sign, then div.

67
00:02:53.01 --> 00:02:55.05
And so, this will only
target the first two divs

68
00:02:55.05 --> 00:02:57.02
in that section, which are the divs

69
00:02:57.02 --> 00:03:02.00
that we use to group divs one
and two and three and four.

70
00:03:02.00 --> 00:03:03.05
Then let's add in our brackets.

71
00:03:03.05 --> 00:03:06.00
Let's split this open.

72
00:03:06.00 --> 00:03:11.06
And let's first set text-align to center.

73
00:03:11.06 --> 00:03:14.02
And then, next, let's set a display type.

74
00:03:14.02 --> 00:03:20.00
And we're going to set
these to a table-row.

75
00:03:20.00 --> 00:03:21.05
Let's save our work.

76
00:03:21.05 --> 00:03:23.00
If we go back to the browser, we won't see

77
00:03:23.00 --> 00:03:24.08
anything different, except for the fact

78
00:03:24.08 --> 00:03:27.06
that the text is being centered.

79
00:03:27.06 --> 00:03:30.08
So, back in the CSS.

80
00:03:30.08 --> 00:03:34.00
After that section,
greater than sign, div,

81
00:03:34.00 --> 00:03:35.03
let's come in here and target the divs

82
00:03:35.03 --> 00:03:39.04
that are inside of those top-level divs.

83
00:03:39.04 --> 00:03:42.06
So, section, space, greater than, div,

84
00:03:42.06 --> 00:03:46.01
then a space, then another div.

85
00:03:46.01 --> 00:03:47.07
Put in our brackets.

86
00:03:47.07 --> 00:03:48.08
Let's come in here and let's set

87
00:03:48.08 --> 00:03:53.03
a display type of table-cell.

88
00:03:53.03 --> 00:03:55.00
So with that in place,
if you save your CSS

89
00:03:55.00 --> 00:03:56.09
and go back to the browser, we'll now see

90
00:03:56.09 --> 00:04:01.07
that the content is
rendering inside of a grid.

91
00:04:01.07 --> 00:04:03.07
Now, to visually illustrate
what's going on here,

92
00:04:03.07 --> 00:04:05.03
we started with a section element,

93
00:04:05.03 --> 00:04:07.01
and that had four divs inside of it.

94
00:04:07.01 --> 00:04:08.08
We then grouped those inner divs

95
00:04:08.08 --> 00:04:11.05
into two sets of additional divs.

96
00:04:11.05 --> 00:04:13.07
Then, in our CSS, we
set the section element

97
00:04:13.07 --> 00:04:15.02
to display as a table.

98
00:04:15.02 --> 00:04:17.07
The immediate divs are set to table rows,

99
00:04:17.07 --> 00:04:19.03
and the divs inside of those divs

100
00:04:19.03 --> 00:04:21.02
are set to display as table cells,

101
00:04:21.02 --> 00:04:26.04
resulting in a two-by-two
table, giving us a grid layout.

102
00:04:26.04 --> 00:04:28.02
So now, back in our CSS, let's continue

103
00:04:28.02 --> 00:04:30.04
styling our table cells.

104
00:04:30.04 --> 00:04:32.08
So, on the next line, let's set a width.

105
00:04:32.08 --> 00:04:35.06
We're going to set these to 50%.

106
00:04:35.06 --> 00:04:37.00
Next, we'll set a padding property

107
00:04:37.00 --> 00:04:40.05
to 15 pixels on all four sides.

108
00:04:40.05 --> 00:04:44.00
Then, on the next line,
let's set a border-left.

109
00:04:44.00 --> 00:04:47.01
We're going to set this
to one pixel for the size,

110
00:04:47.01 --> 00:04:50.07
solid for the style, and
then white for the color.

111
00:04:50.07 --> 00:04:53.05
So, a pound sign and three Fs.

112
00:04:53.05 --> 00:04:55.04
And then, I also want
to set border-bottom.

113
00:04:55.04 --> 00:04:58.06
So I'm going to duplicate the border-left,

114
00:04:58.06 --> 00:05:01.02
and then change this border-bottom.

115
00:05:01.02 --> 00:05:02.09
So with that in place, we'll hit Save.

116
00:05:02.09 --> 00:05:04.05
You'll notice in the
browser now that we have

117
00:05:04.05 --> 00:05:07.06
a doubling of our border on
the left and bottom here,

118
00:05:07.06 --> 00:05:11.00
because I have a border
on the section element,

119
00:05:11.00 --> 00:05:13.06
and the cells inside
on the left and bottom

120
00:05:13.06 --> 00:05:16.04
also have a left and bottom border.

121
00:05:16.04 --> 00:05:17.05
So let's come back to our CSS,

122
00:05:17.05 --> 00:05:20.01
and let's turn off the left border

123
00:05:20.01 --> 00:05:23.06
and bottom border for specific divs.

124
00:05:23.06 --> 00:05:28.08
So let's start by targeting
section, greater than sign, div,

125
00:05:28.08 --> 00:05:32.09
space, div, then a colon.

126
00:05:32.09 --> 00:05:37.03
Let's target the first child.

127
00:05:37.03 --> 00:05:40.07
Put in our brackets.

128
00:05:40.07 --> 00:05:45.00
So, for the first child,
we're going to set border-left

129
00:05:45.00 --> 00:05:48.00
to none.

130
00:05:48.00 --> 00:05:51.01
Then we'll come in here,
select this entire rule.

131
00:05:51.01 --> 00:05:52.07
Paste the rule down here.

132
00:05:52.07 --> 00:05:56.02
Now, let's come in here and
select the :first-child.

133
00:05:56.02 --> 00:05:59.07
Let's cut that from the div
that's inside of the main div,

134
00:05:59.07 --> 00:06:02.06
and let's add it to the main div,

135
00:06:02.06 --> 00:06:07.04
and let's change first to last.

136
00:06:07.04 --> 00:06:08.05
Then we'll come down and change

137
00:06:08.05 --> 00:06:13.08
border-left to border-bottom.

138
00:06:13.08 --> 00:06:15.06
With those in place, let's hit Save.

139
00:06:15.06 --> 00:06:17.00
Let's go back to the browser.

140
00:06:17.00 --> 00:06:19.00
We'll now see that the first child

141
00:06:19.00 --> 00:06:21.04
no longer has a border on the left,

142
00:06:21.04 --> 00:06:24.06
and the divs in the last
child of the first set of divs

143
00:06:24.06 --> 00:06:26.05
no longer have a border on the bottom.

144
00:06:26.05 --> 00:06:28.04
So now we have an even one pixel border

145
00:06:28.04 --> 00:06:31.03
around the entire element,
and a one pixel border

146
00:06:31.03 --> 00:06:34.06
dividing all of the cells inside.

147
00:06:34.06 --> 00:06:35.08
So now, with our grid created,

148
00:06:35.08 --> 00:06:37.07
let's remove the grid properties

149
00:06:37.07 --> 00:06:40.06
when our screen gets too small.

150
00:06:40.06 --> 00:06:42.00
So I have a media query in here

151
00:06:42.00 --> 00:06:45.01
for when the screen is under 600 pixels.

152
00:06:45.01 --> 00:06:46.06
So I'll change the
width here in my browser

153
00:06:46.06 --> 00:06:48.08
to be less than 600 pixels.

154
00:06:48.08 --> 00:06:50.09
Let's come back to our CSS.

155
00:06:50.09 --> 00:06:52.08
I have a media query in
here which is targeting

156
00:06:52.08 --> 00:06:55.09
a max width of 600.

157
00:06:55.09 --> 00:06:57.08
Let's add some returns inside.

158
00:06:57.08 --> 00:06:59.01
And inside of the media query,

159
00:06:59.01 --> 00:07:01.02
let's start by targeting the main section.

160
00:07:01.02 --> 00:07:04.04
So we'll type section,
put in our brackets.

161
00:07:04.04 --> 00:07:08.09
For the main section, we're going
to set border-bottom to none.

162
00:07:08.09 --> 00:07:12.09
That's going to take out the
border on the main element here.

163
00:07:12.09 --> 00:07:14.04
Back to our CSS.

164
00:07:14.04 --> 00:07:15.06
Next, we're going to target the divs

165
00:07:15.06 --> 00:07:19.00
that are immediately inside
of this section element.

166
00:07:19.00 --> 00:07:22.06
So, section, space, greater than, div.

167
00:07:22.06 --> 00:07:24.04
Put in our brackets.

168
00:07:24.04 --> 00:07:29.06
For these items, we're going to
set the display type to inline.

169
00:07:29.06 --> 00:07:30.09
Then, on the next line,
we're going to target

170
00:07:30.09 --> 00:07:34.07
all of the divs that we're
using as table cells.

171
00:07:34.07 --> 00:07:39.08
So, section, greater
than, div, space, div.

172
00:07:39.08 --> 00:07:42.03
Put a space.

173
00:07:42.03 --> 00:07:43.05
Let's add our brackets.

174
00:07:43.05 --> 00:07:45.05
Let's give ourselves some room.

175
00:07:45.05 --> 00:07:47.03
First property is going to be the width.

176
00:07:47.03 --> 00:07:49.05
And we're going to set this to inherit.

177
00:07:49.05 --> 00:07:53.07
This is going to override the
50% width we added earlier.

178
00:07:53.07 --> 00:08:00.05
Next property, we're going to
set the display type to block.

179
00:08:00.05 --> 00:08:04.08
Next property, we're
going to set border-left.

180
00:08:04.08 --> 00:08:07.05
We're going to set this to none.

181
00:08:07.05 --> 00:08:10.03
Next line, we're going
to set border-bottom.

182
00:08:10.03 --> 00:08:13.03
We're going to set this to one pixel.

183
00:08:13.03 --> 00:08:16.01
Solid, with a color of white.

184
00:08:16.01 --> 00:08:19.00
So a pound sign and three Fs.

185
00:08:19.00 --> 00:08:23.04
Then, finally, we'll set
the text-align to left.

186
00:08:23.04 --> 00:08:25.02
Scroll up here a little bit.

187
00:08:25.02 --> 00:08:26.03
Save your CSS.

188
00:08:26.03 --> 00:08:27.03
Let's go over to the browser.

189
00:08:27.03 --> 00:08:28.05
Let's hit reload.

190
00:08:28.05 --> 00:08:31.00
We can see all of our
styles taking effect.

191
00:08:31.00 --> 00:08:33.04
We do see that the last two divs

192
00:08:33.04 --> 00:08:37.04
in the last-child main div do
not have the border bottom,

193
00:08:37.04 --> 00:08:40.01
because we overrode those earlier.

194
00:08:40.01 --> 00:08:42.02
So, again, back to our CSS.

195
00:08:42.02 --> 00:08:44.04
Let's add one final rule.

196
00:08:44.04 --> 00:08:47.02
We'll type section, greater than, div,

197
00:08:47.02 --> 00:08:51.00
colon, last-child,

198
00:08:51.00 --> 00:08:54.08
space, div.

199
00:08:54.08 --> 00:08:56.02
Put in our brackets.

200
00:08:56.02 --> 00:08:57.05
Let's split this open.

201
00:08:57.05 --> 00:09:00.07
And we need to add our
border-bottom property back in.

202
00:09:00.07 --> 00:09:01.07
So let's come up here and copy it

203
00:09:01.07 --> 00:09:05.03
from the divs inside of the main divs.

204
00:09:05.03 --> 00:09:06.08
Let's paste it down here.

205
00:09:06.08 --> 00:09:09.01
Hit Save, go back to the browser.

206
00:09:09.01 --> 00:09:13.01
And now, the two divs inside
of the last-child main div

207
00:09:13.01 --> 00:09:16.01
have border bottoms as well.

208
00:09:16.01 --> 00:09:17.07
So now, we have a section of our content

209
00:09:17.07 --> 00:09:19.09
displaying in a grid on larger screens

210
00:09:19.09 --> 00:09:21.06
using table display properties

211
00:09:21.06 --> 00:09:24.02
without using table
elements in our HTML file,

212
00:09:24.02 --> 00:09:27.04
allowing us to rearrange the
layout for small screens.

213
00:09:27.04 --> 00:09:29.07
And so, with that, I'll
conclude this episode,

214
00:09:29.07 --> 00:09:32.07
and, as always, thanks for watching.