Paso 1: El CSS
El primer paso para crear nuestra galería producto rejilla es usando hojas de estilo en cascada (CSS) de estilo. No te preocupes si tienes pocos conocimientos de HTML y CSS, no necesita saber los idiomas de este Instructable (aunque son muy útiles).
La CSS para la rejilla del producto se puede Agregar a su sitio de Internet de dos maneras.
1. una hoja de estilos externa
2. una hoja de estilo interna
Hoja de estilos externa:
Abrir Bloc de notas y pegue el siguiente código: (está disponible aquí: [http://pastebin.com/b5nzGfbg]) tenga en cuenta que no lo hice con este código, es realmente de [http://alijafarian.com/responsive-image-grids-using-css/]

A continuación, guardar como CSS [filenameofyourchoice]. He guardado como cool.css.
Ahora, subir este archivo a un webhost y obtener un enlace directo a él. Suponiendo que tienes un sitio web, podrás subirla a tu servidor vía FTP, y un enlace directo. Si no puede hacerlo, obtener una cuenta de Dropbox, (aquí es un enlace para registrarse), subir el archivo a la carpeta pública y obtener un enlace directo. O si eso no es posible, Regístrate en Tumblr y dirígete a [https://www.tumblr.com/themes/upload_static_file]. Tumblr permite que usted recibe bienes tema gratis.
En este caso, he subido mi archivo a Tumblr, para obtener el siguiente enlace: [http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css]
Ahora, abra su página web (un documento HTML) y pegue el código siguiente entre el < head > y < / cabeza > Etiquetas: < link rel = "stylesheet" type = "text/css" href = "http://static.tumblr.com/xtiqrla/c4Qn872fi/cool.css" > Asegúrese de sustituir la URL en el código anterior con la dirección URL al archivo CSS.
No tengo un documento de sitio web ya hecho en mano, así que estoy creando uno nuevo en el Bloc de notas y pegar el código anterior entre el < head > y < / cabeza > y etiquetas, como anteriormente mencionados (ver abajo):

Hoja de estilo interna:
Alternativamente, sólo podría pegar en el código CSS en el documento de página web HTML entre el < head > y < / cabeza > y dentro de un par de < estilo >< / estilo > etiquetas.

Grande, es el CSS que hace.