Blog Signup

EverWeb Widgets Podcast

Podcast Episode

CSS Grid Podcast

© Rachel Andrews -

CSS Grid Layout Module

Author: Rachel Andrews

February 5th 2018

Run Time: 16:27

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design responsive web pages without having to use floats and positioning.
An HTML element becomes a grid container by setting the display property to grid or inline-grid.
A grid layout consists of a parent element, with one or more child elements.
Items can be layed out in columns and rows and spaced out using the grid-gap selector. The grid-column-gap and grid-row-gap selectors can be used for more control of the item spacing.

Podcast Episode

The Podcast Episode widget has an image with alt ext, an MP3 player and optional copright info in the left column and a text section with heading, optional fields for author, date and run time, text and an optional download link.
When viewed on devices with screen widths less than the break point setting, the text appears below the image and player.
Columns
The container is responsive with a maximum width setting. The columns have a grid layout so the items can be vertically aligned in the center and their proportional widths adjusted.
Grids can use a fractional units to set the relative widths. In the examle above, the left column control has a value of 3 and the right column 2. The net effect is that the left column occupies 60% of the width and the right column 40%. To make the columns equal, set each value to 1.
There is a control for adjusting the all around padding and for the grid gap between the two items.
Image & Player
The image has an alt text attribute and has controls for setting the border width and color.
The player has a maximum width setting and a control for adjusting its vertical spacing from the image.
Copyright Notice
The © notice is optional. It inherits the font color and has its own font size control. Checking the auto update box will add the year and automatically keep it up to date.

Text Section

The text can use a web safe font or a Google hosted font with a web safe fallback.
There are controls for alignment, line height and vertical spacing. The optional date and run time can have a contrasting font color.
Download Link
A podcast episode that is longer than a few minutes should have a download link so that subscribers can listen at their leisure. The download link can reference a zip file in the EverWeb Assets list or in an external folder.
If the podcast is published to a server other than the EverWeb one, all the podcast MP3 and/or MP4 files - and their corresponding zip files - can be uploaded to a folder(s) on the server and referenced using relative file paths.
The link icon is an SVG so the icon color and hover color can be changed. There are controls for background color and border radius and the link can be aligned left, center or right.
Zip Files

EverWeb Widgets Podcast
All Rights Reserved
© EverWeb Widgets -