Clip Path

This grid uses the CSS Grid Layout Module to create the container and CSS clip-path to create the image shapes.
The images can be configured as internal links and the captions are optional although necessary in practice.
Maximum Width
The maximum width of the grid is calculated from the actual image file width which is entered in the widget settings.
The value enterd for image width must NOT excede the width of the image file. For example, the images used in the demo have a file size of 800 x 600px so the value entered in the widget settings cannot excede 800.
The actual value entered in this example is 720 which menas theat the maximum width of the grid is approximately 1400px.

EverWeb Widgets

Clip Grid

Clip Path

Contact

Footer