Sort Tabs & Grid

The ThemeKit Combo Sort Tabs and Sort Grid widgets work together to create category tabs and an info grid.
How It Works
Each tab is given a name or a number. Images in the grid that belong to that category are given the same ID.
In the demo, the tab IDs are simply numbers - 1, 2 and 3. These same numbers are assigned to any image that should be displayed in that group when the tab is clicked or tapped..
Tabs
The tabs have a grid layout using the minmax() function and the auto-fit keyword. The minimum tab width can be set and there is a separate control for the min width on phones.
Since this is a grid layout the tab horizontal and vertical spacing can be adjusted using controls to adjust the gris column and grid row gap.
The first tab is set up and more tabs are added using the Assets List to add, name and assign and ID.
The tabs have controls for setting different animated background colors for the tabs, active tab and the hover state.
Grid
The CSS Grid layout has <figure> elements arranged in a grid with controls for setting the number of items per row for each device type - computer, tablet landscape, tablet portrait and phone.
There are controls for grid gap, padding and background color and its opacity.
The wrapper alos has spacing and background color controls.
Grid Items
Each <figure> element has a thumbnail image, alt text, link icon, heading, text an an optional full width link at the bottom.
Clicking or tapping any thumbnail will open a larger image in a lightbox window. The lightbox is closed by clicking/tapping the close icon or anywhere off the image.
The grid items can have a border and/or a box shadow if required.
Random
Checking a box for the "random" function will make the image order shuffle every time the page is loaded. Any tab can be the active one on page load by entering its number in the box provided. The first tab number is zero.
Lazy Loading
Lazy loading can be applied to all the thumbnails be checking a box prior to publishing the page. This should be left unchecked during setup so that all the images will be displayed on the EverWeb design canvas.