Responsive Cards
The card grid can have two, three or four items. It can be used to introduce staff to make the business appear as though ut is run by real people, for customer comments or as a to section navigation.
Container
LayoutThe container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
Home
Items
Each item has an optioonal overlay image, a heading, optional span, text and an optional link.
The links are positioned to line up at the bottom.
Images
The text is moved down and the image overlays the top of the text block using some CSS jiggery pokery.
The image can be round or sguare with an adjustable border.
Image Info Grid
Auto Grid
Min-MaxA grid layout using the min-max function and the auto-fill keyword to create a responsive grid without using media queries.
Spacing
Grid GapItems in the grid can be spaced out evenly by giving a value to the grid-gap property.
The grid-column-gap and grid-row gap properties can be used if the columns and rows need different spacing.
Vertical Align
AutoGrid items are aligned vertically using the align-items property, The default value is "auto" which makes all the grid item heights equal despite varying content.
Horizontal Align
JustifyGrid items are aligned horizontally using the justify-items property.
Flex
Grid is a lot more versatile than flex but there are situations where it can be combined with grid.
Links
PositionThe links are positioned at the botttom of the grid item very simply by using flex and auto margins
Versatile Grid
This auto grid adjusts the number of items per row for changes in browser/device screen width by simply setting a minimum value for the width of the grid item
Content
The items can have an optional image with alt text, a heading, optional span, text and an optional link so that it can be used for different purposes.
Images
The images can have varying aspect ratio and should be sized appropriately and optimised before importing into EverWeb.
Lazy Loading
When it comes to responsive pages which will be viewd on mobile devices optimising the image size should be supplemented by lazy loading of the images.
The lazy loading feature should be turned on last before publishing the page as all or some of the images may disappear from the EverWeb design canvas.
Styling
Web page items need to have some little details to raise the design level above the masses of similar sites.
The grid container can have a gradient background if required, the items can have a border to define them and a bottom box shadow to "lift" them off the canvas.
The links are given that little extra professional touch by having a hover background transition.
Menu