El artículo de net tut es muy bueno, pero tengo algo más para compartir. Aprender Grid960 fue muy doloroso para mí. La mayoría de esto es reiterar el artículo net tuts. Esto le da a la intuición para los principiantes, ya que era un dolor de cabeza:
Sinopsis
Los periódicos y revistas de los sistemas de red de uso con canaletas en el medio, y hace que la página se vea mucho más agradable a la vista cuando se utiliza las técnicas de diseño. La grilla te guiará perfectamente. Antes de comenzar, debes comprender el anidamiento de CSS/HTML.
<div class="a">
I include all the items A.
<div class="b">
I include all the items of B with all of A.
</div>
<div class="c">
I include all the items of C with all of A. B is not here, but it is on the same level.
<div class="d">
I include all the items of A with C and D
</div>
</div>
Mire el archivo de ejemplo para ver cómo se puede romper su diseño en una cuadrícula.
Utilice el inspector presionando F12 en Chrome + IE + Firefox (¡Gracias Larry!). Resalta los recuadros para ver cómo se edita el CSS.Me resulta muy difícil sumergirme directamente en los archivos CSS de Grid960. Verá cómo se crea cada cuadrícula
Declare una cuadrícula de 12 tamaños como div principal. Los divs para niños deben agregar hasta 12 y puede dividir la página de la forma que desee. Ejemplo: 3 cuadrícula + 3 cuadrícula + 6 cuadrícula = 12 cuadrícula. 3 cuadrícula + 4 cuadrícula + 4 cuadrícula + 1 cuadrícula = 12 cuadrícula. Puedes ver esto si usas F12 en Chrome. Resalta la grilla en el archivo de ejemplo. No olvides agregar el div claro cuando hayas terminado con una fila y quieras comenzar una nueva.
<div class="container_12">
<div class="grid_12"><a href="images/header.png" alt=""></a></div>
<div class="clear"></div>
<div class="grid_12" id="navbar">A</div>
<div class="clear"> </div>
<div class="grid_7">B</div>
<div class="grid_5">C</div>
<div class="clear"></div>
<div class="grid_12 spacer">D</div>
<div class="clear"></div>
<div class="grid_3">E</div>
<div class="grid_3">F</div>
<div class="grid_3">G</div>
<div class="grid_3">H</div>
<div class="clear"></div>
<div class="grid_12 spacer">I</div>
<div class="clear"></div>
<div class="grid_4">J</div>
<div class="grid_4">K</div>
<div class="grid_4">L</div>
</div>
sufijo y el prefijo:
Digamos que quiere que su rejilla para iniciar en el medio. No es suficiente declarar una grilla 3 por sí mismo. Necesitas darle una información extra que indique que quiero que "flote". Aquí es donde entran el sufijo y el prefijo. Prefijo significa omitir la cantidad x de div y el sufijo significa omitir x cantidad de div después de él.
De tuts netos
Alfa y Omega:
Si desea aplicar un estilo y tienen que llegar a lo largo de varias rejillas incluyendo el espacio del canal. Alpha es el primero y omega es el último div al que se aplica.
De los tuts netos
empujar y tirar de
Esto es para Larry! Empujar y tirar es para desarrolladores que desean reorganizar sus páginas para SEO.
http://www.clubosc.com/960-grid-tutorial-understanding-push-and-pull-classes.html
Observe cómo las clases rosa y amarillo se invierten, sin embargo los divs están dispuestas a la manera opuesta?
pero donde explican todos los selectores que puede utilizar: .suffix_x .prefix_x .push_x .pull_x .clear .clear_fix – ajsie