ten
10
impressionables
The main magic happens on the outer grid. Then, the section boxes are placed on the lines. Some overlap. look at margins.
1
There are two grid-items here
They are automatically placed. The number on the left in a 20% column, this container with text in a 1fr column.
Linked Text2
Some Heading Level 3
The text area elements are placed in a subsection wrapper. Placement is reversed with...Flexbox!
No background below
Grid does not have to be used for everything...
Mix different methods, here I am simply using an absolute positioned number.
Linked Text3
4
Positioned at ends
Make a grid container and place all items at the bootom right using flex end on the container.
It's awesome5
Lot of grid inside here!
Three columns with the 40px middle column used for the overlap effect. The right column gets more space (3fr).
A backgr-img scales easier6
7
Look mama
We are using an old-fashioned float here. That image goes to the right, the text floats around it.
Linked Text8
Heading Level 3
Just block level elements here with a max-width on this parent container to get some wrapping going.
Linked Text9
Heading Level 3
Mix different methods, here I am simply using an absolute positioned for this box.
Linked Text