EverWeb Widgets

Responsive Grid Module - Overlap Items

Responsive Grid  Layout

Responsive Grid Overlap

The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the :grid-column-start and grid-column-end properties.
The grid-row property specifies a grid item's size and location in a grid layout, and is a shorthand for the grid-row-start and grid-row-end properties.

Responsive Grid Overlap
Responsive Grid  Layout

Responsive Grid Overlap

In this example, the bottom image has been moved to the right and the text content centered.
Data is entered to designate the start and end of the item. This text block's horizontal position is column: 4/10 which means that it starts at the begining of column 4 and ends at the start of column 10 - not the end of column 9 as one would expect.
To move an item horizontally to the right hand side of a 12 column grid, the end is set as 13 or, more confusingly, -1.

Responsive Grid Overlap

© EverWeb Widgets -