EverWeb Widgets

CSS Grid Layout Module

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.
Why Use It?
One of the main benefits of using the grid layout module is that the items in any row will maintain the same height despite have varying amounts of content. Normally this would require the use of Javascript and extra styles.
Items can be easily positioned vertically using the "align-self" property. This can be set to start, center, end or auto.
The number of items per row is set simply by entering the number of columns. These are changed for each device type using media queries.
Overall, the CSS Grid Layout can create complex responsive layouts with minimal code, no Javascript and greater efficiency then any other method.
Can I Use It?
As of October 2017, Chrome, Firefox, Safari and Edge all support CSS Grid. Internet Explorer is now redundant and will never support modern practices. IE Edge supports grid from V 16.

CSS Display Grid Browser Support & Usage
Browser
Version57165210
Usage79.6%3.8%10.3%3.3%

When Can I Use It?

Unless a website is selling products or services to third world countries, there's no reason not to take advantage of this liberating and efficient method of creating responsive layouts with the minimum of hassle. Webmasters who want to help to improve the web - and encourage visitors to achieve the best user experience - can display a browser update notice like the one that appears when this page is first loaded in the browser.
Warning Notice
There will always be a group of people who surf the 'net but don't know what a browser is or that they should keep it up to date for security reasons if nothing else. A warning notice can be inserted on a the home page - or every page of the site - that will appear only if the visitor's browser does NOT support the CSS Grid Layout Module.
The warning notice appears as an overlay in the center of the browser or device window and can be dismissed by clicking the "Close" button. It can be positioned in relation to the top of the window using a percentage value adjust with a slider.
There is an option to add another link tab which will open a page where the visitor can easily find and download the latest version of their browser of choice. This page can open in a new window if required.
Warning Notice Widget
The warning notice widget is included in every widget pack in the Responsive Grid Layout category. In most cases it shouldn't be necessary to install it on every page of the site but it may be worth inserting on the Home page.

© EverWeb Widgets - -

This website uses the CSS Grid Layout which requires an up to date browser!

CloseInfo