htmlcssidocscript

Limiting HTML picture grid columns


I'm working on iDocScript and HTML to read on a picture database and return the result in a four column and unlimited rows picture grid.

[ picture ] [ picture ] [ picture ] [ picture ]

[ picture ] [ picture ] [ picture ] [ picture ]

Something like this and i'm confused to limit the number of columns even without using iDocScript.


Solution

  • You can use column-count to limit the number of column with an element like so :

    .example {
      -webkit-columns: 4 150px;
      -moz-columns: 4 150px;
      columns: 4 150px;
      -webkit-column-gap: 2em;
      -moz-column-gap: 2em;
      column-gap: 2em;
    }
    

    Live Demo