EverWeb Widgets

Random Row Grid

  • 11
  • 22
  • 33
  • 44
  • 55
  • 66
  • 77
  • 88
  • 99
  • 1010
  • 1111
  • 1212
  • 1313
  • 1414
  • 1515
  • 1616
  • 1717
  • 1818

Random Grid

This widget uses the power of CSS Grid Layout to create a Google style random image grid with only a few lines of code. It allows users to have control over creating a varied collage type layout independent of the actual size and aspect ratio of the images.
To create the grid, drag all the random size images together onto the Assets List in the widget settings panel, set the required row height and then select each image file name in turn and choose an image type from normal, square, wide or tall.
It doesn't really matter what the aspect ratio of the original image is since the grid items use the object-fit property to make sure the images fit into the allotted space.
There are settings for row height and minimum image width. These take care of the layout at varying browser/device widths an setting break points with media queries is NOT required.
Lazy Loading
The grid can have up to 480 images and, since they are lazy loading, it won't effect the page download speed in the browser.
The layout can be changed by altering the minimum image width and the row height and it offers an opportuniity for experimentation by the more adventurous!
There are controls for adjusting the grid gap and top/bottom and left/right padding.
The images can have a border and/or a box shadow.
The optional captions can be positioned anywhere and have a background color with opacity control. The can be set to show on hover if required.

© EverWeb Widgets -