EverWeb Widgets

CSS Layout

Grid Module

Flexible

Responsive

Website

Designs

CSS Grid Layout - Sidebar

Responsive Grid Layout

responsive grid layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
The module is supported by all modern browsers. Note that it is not supported by Internet Explorer and Edge version 15 but these browsers are little used and very outdated.
A grid layout consists of a parent element, with one or more child elements.
This example contains two elements - an article and an aside. The relative widths are calculated in the CSS using fracttional units. The article is assigned a fractional width of 3 and the aside 2 so they occupy 3/5 and 2/5 of the total width respectively.

CSS Grid Layout - News/Blog Post Sidebar

© EverWeb Widgets -