This item has 8 columns and three rows and is set to full width.
The image starts at column three and spans six columns.
The text starts at column 2 and spans three columns. It starts at row one, spans one row and the self-align property is set to "center".
The CSS Grid Layout Modules makes it possible to easliy layer responsive items with the minimum of code. Grid items can be positioned in a number of different ways. The method used here is perhaps the easiest to understand without having to learn CSS.
Items are placed horizontally by specifying the number of the "start" column and the number of columns spanned.
Items are placed vertically by specifying the number of the "start" row and the number of rows to span.
The examples above have 8 columns and 3 rows to illustrate horizontal overlapping. The one further down the page adds more rows to show how a vertical overlap can be created.
Horizontal Position
In the example above, the image starts at column 1 and spans 6 columns.
The text starts at column 5 and spans 3 columns.
Vertical Position
The image occupies all three rows so it starts at row 1 and spans 3 rows.
The text is in row 3 so it starts at row 3 and spans 1 row.
The text is an an HTML5 article element which can be aligned vertically within it's parent using the align-self selector set to start, center, end or auto. Auto stretches it to fill the height of the parent container. In this case it is set to "center".
Mobile Layout
Media queries are used to change the layout for mobile devices. The break point can be set for tablet landscape (1059px) or tablet portrait (799px).
In the example above, the image starts at column 1 and spans all 8 columns. It starts at row 1 and spans all 3 rows.
The text starts at column 1 and spans 8 columns.
It starts at row 3 and spans 1 row. The align-self proerty is set to "end" so that the text overlays the image at the bottom.
To move the text to the top, it would be set to start at row 1, span one row and have the align-self property set to "start".
Vertical Images
The widget allows two different sizes of image to be used. The large image displays when the page is viewed on computers and tablets and the small image when viewed on mobile phones.
Vertical Overlap
The items above have a horizontal overlap. Scroll down to see an example of vertical overlap …
The grid has 8 columns and 6 rows. The image spans all the columns . It starts at row 1 and spans 5 rows.
The text starts at column 6 and spans 2 coumns. It starts at row 3 and spans 4 rows to extend it beyond the bottom of the image. The align-self selector is set to "end"
Mobile Styles
The image fils the grid container background by changing its row span to 6.
The text is set to start at column 1, span all 8 columns and occupy the last row.
In the above example, the container is set to full width so that it fills the browser/device width at a fixed height. The container has 8 columns and 6 rows.
Main Position
The image starts at column 1 and spans all 8 columns. It starts at row 1 and spans 5 rows.
The text starts at column 6 and is set to span 2 columns. It starts at row 3 and is set to span 4 rows. The align-self property is set to "end". This positions it at the bottom of the container and allows it to expand upwards as text is added.
Mobile Position
The image is set to fill the container by starting at column 1 and spanning all 8 columns. It starts at row 1 and spans all 6 rows.
The text starts at column 1 and spans all 8 columns.
To position it in the last row it is set to start at row 6 and span one row. The align-self property remains at "end" so that the text overlays the bottom of the image
To position the text at the top of the image it would be set to start at row 1, span one row and align-self at the "start".
CSS Grid Layout Module
This module now plays a major role in modern web design so it is worth spending a little time learning the basics. Use the grid widget to experiment with and to understand how items are positioned.
The Grid By Example website is a good place to start learning more about the module.