CSS Regions and Grid Template

regions-grid.css

/* Region related style for redirecting content flows */
#article {
    flow-into: article_flow;
}

#region1, #region2, #region3, #region4 {
    flow-from: article_flow;
}

/* positioning and sizing of the region elements */
#page {
  width: 800px;
  height: 600px;
  grid-template: "aaa.e"
                 "....e"
                 "bbb.e"
                 "....e"
                 "c.d.e";
  grid-rows: 52% 4% 20% 4% 20%;
  grid-columns: 30% 5% 30% 5% 30%;
}
#regionA { grid-cell: a; }
#region1 { grid-cell: b; }
#region2 { grid-cell: c; }
#region3 { grid-cell: d; }
#region4 { grid-cell: e; }