The main magic happens on the outer grid. Then, the section boxes are placed on the lines. Some overlap. look at margins.
They are automatically placed. The number on the left in a 20% column, this container with text in a 1fr column.Linked Text
The text area elements are placed in a subsection wrapper. Placement is reversed with...Flexbox!No background below
Mix different methods, here I am simply using an absolute positioned number.Linked Text
Make a grid container and place all items at the bootom right using flex end on the container.It's awesome
Three columns with the 40px middle column used for the overlap effect. The right column gets more space (3fr).A backgr-img scales easier
Just using absolute positioning to place items in this sectionLinked Text
We are using an old-fashioned float here. That image goes to the right, the text floats around it.Linked Text
Just block level elements here with a max-width on this parent container to get some wrapping going.Linked Text
Mix different methods, here I am simply using an absolute positioned for this box.Linked Text
Flexbox right here, also to change the order at the last breakpoint.Linked Text
Create crazy cool layouts.