Categories

CSS. Sistema Grid 960

Chris Diaz septiembre 16, 2011
Rating: 3.6/5. From 5 votes.
Please wait...

Al revisar el código fuente y los estilos de plantilla puede haber visto las clases como: “grid_6”, “grid_8”. Estas son las clases utilizadas por grid 960 system. Vamos a analizar lo que puede ofrecer este sistema.

Sistema 960 Grid es un esfuerzo de optimizar el proceso de desarrollo web, proporcionando las dimensiones comúnes, basadas en un ancho de 960 píxeles. Hay varias variantes del diseño. Los más utilizados son ‘grids’ (columnas de la cuadrícula) de 12 columnas, 16 columnas y 24 columnas.

Abajo hay un ejemplo de grid (columnas de la cuadrícula) de 24 columnas utilizado en una plantilla:

Como Usted puede ver los bloques de diseño cuadran con las columnas de la cuadrícula. Utilizando las clases disponibles Usted puede fácilmente cambiar el diseño de sitio web de acuerdo con sus necesiadades.

Uso

Cada plantilla con las columnas de la cuadrícula contiene el fichero grid.css donde se puede revisar las clases específicas utilizadas. Vamos a ver cómo se puede utilizar el sistema.

Abra el fichero grid.css:

Al principio del fichero css se puede encontrar lo siguiente:

columns:24
Column width:30
Gutter width:10

Así la información del fichero inicial incluye el número de columnas, el ancho de columnas y ancho de gutter (canal).

A continuación, puede ver la clase .container_24{} – esta clase debe ser utilizada para el contenedor que mantiene todo el contenido web.

Nota: la clase principal puede tener el nombre container_12 o container 16 según el número de columnas utilizadas.

Las clases .grid_1, .grid_2 etc. son utilizadas para establecer el ancho de los bloques interiores. Hay que poner los bloques con las clases de grid dentro del bloque con la clase container_24

Las clases establecen el ancho de los bloques:

.container_24 .grid_2 {
width:70px;
}

 

Por ejemplo, el código de este diseño es lo siguiente:

<div class="container_24">
<div class="grid_9">Some content</div>
<div class="grid_15">Some content</div>
<div class="grid_12">Some content</div>
<div class="grid_12">Some content</div>
</div>

En este diseño HTML se usan estas clases de grid:

.container_24 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

.container_24 .grid_9 {
	width:350px;
}

.container_24 .grid_12 {
	width:470px;
}

.container_24 .grid_15 {
	width:590px;
}

También se puede utilizar clases adicionales como:

.prefix_1, .prefix_2 etc – define el relleno izquierdo de bloque (el espacio de bloque de lado izquierdo);

.suffix_1, .suffix_2 etc – define el relleno derecho de bloque (el espacio de bloque de lado derecho);

Más información sobre el sistema grid960 puede encontrar en la web oficial http://960.gs/.


Esta entrada fue publicada el Trabajar con CSS y etiquetada class, css, grid960, style. Agregar enlace permanente a marcadores.

Submit a ticket

Si Usted todavía no puede encontrar un tutorial suficiente para arreglar su problema, por favor use el siguiente enlace para enviar un ticket a nuestro equipo de soporte técnico. Nosotros enviaremos nuestra respuesta dentro de próximas 24 horas: Enviar un ticket