Friday 15 October 2010

How to display a Node Gallery in a grid?

If you use Node Gallery module, you probably wonder how to display images  in a grid? It's very simple and you can do this with CSS below:

.gallery-images-list {
  overflow: hidden; /* clear floats */
}

.gallery-images-list li {
  float: left;
  width: 24%; /* you can adjust this to your theme */
  min-height: 190px; /* if you use long titles which will be displayed under pictures some pictures may 'stuck' and not go to left, try lower value and you will see what I mean */
}

.gallery-images-list .image-thumbnail a {
  display: block;
  text-align: center;
}

.gallery-images-list .image-thumbnail img {
  margin: 5px;
}


Simply paste that code at the bottom of your style.css file.

Interesting article about CSS, images and grids click

No comments:

Post a Comment