Hybrid Grid

The ThemeKit Graphic Grid widget combine both a Flexbox layout and a CSS Grid Layout Modulegrid to create a unique design following the modern trend to break out of boring rows of boxes.
The flexbox layout allows odd items to be automatically centered and the grid layout creates the overlapping items with box shadows to "lift" the items off the design canvas.
Grid
The auto grid doesn't require media queries. The items have a max width setting and the item spacing is created by applying a margin using CSS calc.
As can be seen in the example the grid has the option to add a centered main heading if required.
The grid items have …

• Lazy loading images with alt text an optional border
• A text area with min height control
• A heading, optional styled span and text
• A link tab with a vertical adjust control
• Link background hover animation
• Links globally switch from internal to external
• Common link text option
• Common controls for adding a box shadow to the individual items