EverWeb Widgets Blog

Responsive Grid Stacks

Using Stacks

Anybody who is seriously involved in web design will have noticed how leading designerrs are moving away from regimented layouts and creating free flowing designs with overlapping items and empty space.
Empty Space?
As discussed in a previous post, "white space" is one of the most importamt factors in any successful layout and should be used by the designer to lead the visitor through the content and draw their attention to the most important items.
Overlapping helps to group related items and to allow them to stand out from the rest. If used sensibly, it can really enhance a page design and help to sell a product, service or concept.

Adrift ?

Are you lost in the world of web design? Find a new path by embracing the CSS Grid Layout Module.
Don't be tied down by complicated grid structures and obsolete methods.
Find the freedom to express your layout design skills.

Info

Text Overlap Image

The main section has a grid layout. In this example it is set centered with a maximum width of 1200px and a height of 600px.
The grid has eight columns and three rows.
The image starts in column 3, spans 5 columns and all 3 rows.
The text starts at column 2, spans 3 columns and is in row 2.
Break Point
The break point at which the layout changes is set for tablets in portrait mode. Both the image and the text are set to start in column 1 and span all 8 columns so that they occupy the full width of the section.
The image still spans all 3 rows and the text is placed in row 3 so that it overlays the bottom of the image. Its "align-self" property is set to ""end" so that it lines up with the image's bottom edge.
Vertical Align
One of the really useful features of the CSS Grid Layout Module is the "align-self" property which can be set to "start", "center", "end" or "auto".
"Start" aligns it at the top of the row, "center" in the middle and "end" at the bottom. "Auto" will stretch it to the full height of the row.
Variations
In the item below, the text and image have switched posiitons. The text is placed in row 1, starts at column 6 and spans 3 columns which would place it at the top and right edges of the container. The control for margin is given a value of 20px to space it in a little.
Below the break point, the text becomes full width and is placed in row 1 with its "align-self" property set to start to overlay the top of the image.

Grid Widgets

Lost Cause

This is Westminster in London where the most useless government in Europe sits and squables like shool kids while achieving nothing useful to anyone - least of all the people it is supposed to represent.