1
00:00:00,480 --> 00:00:07,170
We can very easily convert our two column layout into a three column layout three column meals are typically

2
00:00:07,170 --> 00:00:10,410
used for laptop and desktop screens.

3
00:00:10,410 --> 00:00:14,610
A three column layout will also work in a tablet landscape mode.

4
00:00:14,610 --> 00:00:21,510
If the screen resolution is more than or equal to nine hundred and ninety two pixels for example an

5
00:00:21,540 --> 00:00:28,870
Apple iPad in smaller devices the columns will stack on top of each other as usual.

6
00:00:28,870 --> 00:00:35,140
Let's go ahead and add a third column to our two column Leo.

7
00:00:35,190 --> 00:00:38,610
Go ahead and copy this columns called

8
00:00:46,490 --> 00:00:54,770
will change the background to be 1 since we now need to split 12 columns among three rows.

9
00:00:54,770 --> 00:00:56,770
We need to adjust our values.

10
00:00:56,810 --> 00:01:03,120
We can create equal sized columns by plugging in four by four by four.

11
00:01:04,590 --> 00:01:06,110
So let's see what that gives us.

12
00:01:06,110 --> 00:01:10,670
We'll save the file and refresh the browser window

13
00:01:14,250 --> 00:01:25,760
so we can see with three columns when the viewport gets smaller the columns stack on top of one another

14
00:01:31,650 --> 00:01:42,840
we can also try different values as well have a small first column a large middle column so 2 by 8 by

15
00:01:42,840 --> 00:01:43,200

16
00:01:46,280 --> 00:01:47,300
and that's what that looks like

17
00:01:57,190 --> 00:02:01,960
and we'll try 3 by seven by two

18
00:02:14,500 --> 00:02:18,280
so you can see that the first column is slightly larger now than the last column.