EverWeb Widgets

Card Grid

Sponsors & Associates

The card grid can be used to advertise sponsors, suppliers and associated websites. The grid will create up to 48 cards. The number of cards per row is adjustable for each device type - computer, tablet landscape, tablet portrait and mobile phone.
The grid item spacing is adjusted using the grid-gap property and the left/right padding is automatically adjusted to half that value using CSS calc in the code.
The wrapper background has controld for the background color and its opacity and there is a control for adjusting the vertical spacing from the items above and below.

EverWeb Widgets

CSS Grid Widgets

for

Better Web Design

i

ECWID eCommerce

Create a fully featured
Online Store

Free

For up to 10 items

i

EverWeb Software

Web Design
for Mac OS

Free Download

i

Simplybook.me

Website booking forms

Widgets Available

Free option

i

E-Junkie

Digital Distribution

Cost effective

Easy Setup

i

Don't Delay

Get Your Grid Widgets

TODAY

i

Grid Items

The cards have a heading, dividing line with a width setting, a text block, an optional span, an optional text block and a link.
Aspect Ratio
Since the cards themselves have to be responsive, they can't be given a finite width and height. They can't have percentage width with auto height either for obvious reasons.
Some tricky CSS is used to create cards using an aspect ratio rather than a width and height.
In the widget settings are two controls for "Card Width" and "Card Height". Any values can be entered here which will give the required aspect ration.
All the calculations are done in the CSS. The default values for width and height are 4 and 3. Non mathematicians can find the required aspect ratio by trial and error!
Links
The links can be configured to open internal or external page by entering a relative or absolute file path into the URL box and can open in a new window if required.
Follow the link below to find out about relative and absolute file paths.
Animation
The slide up animation can be set to fire only once or every time the item enters the viewort. There is a checkbox to allow the animation to occur on moobile phones if required.

File Path

© EverWeb Widgets -