Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
6. Working with Layout Grids > The New CSS Grid Layout module: The Future Is No...
With all this talk of grid systems for the web, the future looks promising. An actual CSS Grid Layout module is, as of this writing, in editor’s draft at the w3c (http://dev.w3.org/csswg/css3-grid-align/). The CSS Grid Layout module will allow you to define a basic grid in the top of your CSS, and position your elements directly within the grid.
For example, let’s go back to Figure 6-5 and see how we’d construct that grid with this new module.
The first thing we’d want to do is define our grid container. We’ll
call that #page in our CSS. Since most
of our widths are actually grid-3 (in 960.gs terms), we can probably get
away with doing 4 columns instead of 12. We’ll also need three rows: one
for the header, one for the middle, and one for the bottom:
