My first impression was, "That's a lot of stylesheets!" It took me awhile to decide if I liked the modularization of the CSS but I grew to appreciate it because it helped me focus. This is the same reason I like breaking a layout into Grails templates. I haven't tried to make the result look good yet, it is intended to demonstrate a quick way to customize the structure of your layouts.
I ended up with five templates stored in a folder named common. I added a stylesheet specific to the application named layout.css since I named the application layout. Later I decided that was a confusing name but luckily this is just a quick proof of concept. I did not include the standard main.css but of course you can if desired.The only feature of 960 Grid System that didn't perform as I wanted it to right out of the box (no offense Dave Klein) was centering the page in Internet Explorer. In order to center the page in IE I added the wrapper div with text-align: center. This required me to tweak container_12 to return everything to text-align: left. This demonstrates a very simple example but it should be easy to see how you could use Grails templates and the 960 Grid System to create just about any fixed layout you could want.
Here is main.gsp:
<html>
<head>
<title><g:layouttitle default="Layout Example"></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'reset.css')}">
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'960.css')}">
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'text.css')}">
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'layout.css')}">
<g:layouthead>
</head>
<body>
<div id="wrapper">
<div class="container_12">
<div class="grid_12">
<g:render template="/common/topbar">
</div>
<div class="grid_12">
<g:render template="/common/header">
</div>
<div class="grid_12">
<g:render template="/common/menu">
</div>
<div class="grid_8">
<div id="content">
<g:layoutbody>
</div>
</div>
<div class="grid_4">
<g:render template="/common/sidepanel">
</div>
<div class="clear">
<div class="grid_12">
<g:render template="/common/footer">
</div>
</div>
</div>
</body>
</html>
Here is layout.css:
body
{
background: #99BADD;
}
#wrapper {
text-align: center;
}
.container_12 {
text-align: left;
}
#topbar {
background: url(../images/30-y.gif) repeat-x;
height: 30px;
margin-top: 20px;
}
#header {
background: url(../images/120-y.gif) repeat-x;
height: 120px;
text-align: center;
margin-top: 20px;
}
#menu {
background: url(../images/60-y.gif) repeat-x;
height: 60px;
margin-top: 20px;
}
#content {
background: url(../images/620-x.gif) repeat-y;
width: 620px;
margin-top: 20px;
}
#sidepanel {
background: url(../images/300-x.gif) repeat-y;
width: 300px;
margin-top: 20px;
}
#footer {
background: url(../images/45-y.gif) repeat-x;
height: 45px;
text-align: center;
margin-bottom: 20px;
}