ptg16476052Understanding the Mechanics of RWD 45516
One fun way to create columns of your page is to use the new CSS3 columns properties.
There are 13 new properties in CSS3 to help you create columns:
n column-width—Defines the width of each column
n column-count—Defines the number of columns
n columns—A shorthand property to define the column width and count
n column-gap—Defines the length of the gap between columns
n column-rule-color—Defines the color of the line between columns
n column-rule-style—Defines the style (like solid, dashed, or dotted) of the line
between the columns
n column-rule-width—Defines the width of the line between columns
n column-rule—A shorthand property to define the width, style, and color of the line
between columns
n break-before, break-after, and break-inside—All define the page or column
break behavior before, after or inside the box
n column-span—Defines how many columns the element should span across
n column-fill—Defines how to fill the columns either balanced between the col-
umns (balance) or filled sequentially (auto)In the previous lesson, we modified the Dunbar Project website to have multiple col-
umns. But what if I want small devices to have one column and then larger devices have
the content show in newspaper style columns? That is easy if you start with the HTML I
showed you back in Lesson 15:
Input ▼
<!doctype html>