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.

By bob visser and grid builder

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 Text

2

 Some Heading Level 3

The text area elements are placed in a subsection wrapper. Placement is reversed with...Flexbox!

No background below
Placeholder Picture
Placeholder Picture

Grid does not have to be used for everything...

Mix different methods, here I am simply using an absolute positioned number.

Linked Text

3

4

Positioned at ends

Make a grid container and place all items at the bootom right using flex end on the container.

It's awesome

5

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 easier

6

No grid inside here

Just using absolute positioning to place items in this section

Linked Text
Placeholder Picture

7

Look mama

We are using an old-fashioned float here. That image goes to the right, the text floats around it.

Linked Text

8

Heading Level 3

Just block level elements here with a max-width on this parent container to get some wrapping going.

Linked Text

9

Heading Level 3

Mix different methods, here I am simply using an absolute positioned for  this box.

Linked Text

10

Placeholder Picture

Heading Level 3

Flexbox right here, also to change the order at the last breakpoint.

Linked Text

Created with:

Free CSS Grid Builder

Create crazy cool layouts.

Placeholder Picture