I am using this gallery grid layout

http://codepen.io/team/css-tricks/pen/pvamyK

html:

CSS:

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

I need the images to fill just a full screen div and the images that wont be covered in the screen can be cropped out. Right now the situation is that if the images don't fit the screen, it goes to the next column in the grid thus leaving large empty spaces at the end of each column.

I am using 25 images to fill a 5 column grid and without the full screen div, the grid would just extend for 3 screens. I just want 1 full screen div even if it means that many of the images wont be visible and will be cut off.