HTML and CSS Reference
In-Depth Information
FIGURE 7.17
Using CSS regions
to lay out content into a grid.
Yo u t h e n d i c t a t e w h e r e t h e c o n t e n t s h o u l d fl o w i n t o b y a p p l y i n g y o u r k e y w o r d
to the relevant elements. In this case, I wanted the content to flow into the four
<div>
s that have a class of
region
:
.region {
padding: 1rem;
background-color: red;
border: 1px solid white;
-ms-flow-from: my-regions;
}
This is how it currently works in IE10, and it produces the layout shown in
Figure 7.17
. Note how I've actually created this layout using a CSS grid. Indeed, you
can lay out the page in any way you want, and then put the content into elements
of your choosing using regions.
