5.16. Multicolumn Layout

CSS3 allows you to easily create multicolumn layouts. In Figure 5.17, we create a three-column layout by setting the column-count property to 3 (lines 15–18) and the column-gap property (the spacing between columns) to 30px (lines 20-23). We then add a thin black line between each column using the column-rule property (lines 25–28). When you run this example, try resizing your browser window. You’ll notice that the width of the columns changes to fit the three-column layout in the browser. In Section 5.17, we’ll show you how to use media queries to modify this example so the number of columns varies dynamically based on the size of the device screen or browser window, allowing you to customize the layout for devices such as smartphones, tablets, notebooks, desktops and more.