CSS3 Regions – How it Works [Web Design]

One of the best advantage of print media, like a magazine or a newspaper, over the website is the full flexibility on arranging the pages and the paragraph layout. For example, print media has been able to gracefully flow the content in more than one columns, and even rather complex ones.

However, due to the way content on the Web is structured, trying to mimic a similar layout in Web content is very tricky.

In order to make the Web layout more flexible like in print media, a new CSS3 Module was introduced – CSS3 Regions. Rather than placing the content within multiple elements, this module allows the content to flow in the specified areas (regions) on the page.

Let’s see how this module works by example.

Enable Experimental Feature

This module is still in its experimental stages, and it is currently only supported in Google Chrome and Internet Explorer with prefix. If you are using Google Chrome you need to first enable the experimental feature. To do so, go to chrome://flags/ and set the Enable experimental WebKit features to Enabled.

Basic Usage Example

In this example, we will have two types of content: main content and complementary. We will place the main content in Region 1, 2 and 4, while the complementary will be displayed in Region 3, as illustrated in the following figure.

HTML

Let’s start off with the HTML markup.

The CSS3 Regions module is not restricted to the content structure, thus we can simply add the complementary outside the main content, like so – though, as we mentioned above, we actually will display it in the middle of the main content.

<header class="cf">
	<h1><span>Lorem ipsum dolor sit amet,</span> consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut.</h1>
	<h2>labore et dolore magna aliqua</h2>
</header>

<article class="cf">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat.</p>
</article>

<aside>
	<p><img src="img/stat.jpg" width="500" height="300"></p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat.</p>
</aside>

Then, we need to add the regions markup where the content should flow. It does not matter whether we add the markup above or below the actual content.

<div class="regions cf">
	<div id="region-1" class="region cf"></div>
	<div id="region-2" class="region"></div>
	<div id="region-3" class="region"></div>
	<div id="region-4" class="region cf"></div>
</div>

CSS

In the stylesheet, we specify the width and height of the regions. The height is necessary to specify the content breakpoint, otherwise the content will not flow to the other regions.

.demo-wrapper #region-1,
.demo-wrapper #region-4  {
	width: 100%;
	height: 250px;
}
.demo-wrapper #region-4 {
	height: 400px;
}
.demo-wrapper #region-2,
.demo-wrapper #region-3 {
	width: 50%;
	height: 700px;
	margin-bottom: 25px;
}

To add the content in the regions, we use the new CSS properties flow-into and flow-from. These properties are used to bridge the content and the regions. To flow the content across the regions, we can write the style rules this way.

article {
	-webkit-flow-into: article;
	flow-into: article;
}
.demo-wrapper aside {
	-webkit-flow-into: aside;
	flow-into: aside;
}

#region-1,
#region-2,
#region-4 {
	-webkit-flow-from: article;
	flow-from: article;
}
#region-3 {
	-webkit-flow-from: aside;
	flow-from: aside;
}

With some additional decorative styles, we will get the following nice result in the browser.

You can head over to the demo page to see it in action.

Further Resources

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail