1) All of These Headlines Are Not Exactly The Same

In the real world, you don't know how long the content will be. Writers will write what they need. Photos will be cropped to the shape that they should be. That's good. Make a system that allows this. You want it to be flexible and robust.

2) Some Are Short

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.

3) Some Headlines Can Sometimes Be Quite Long, Because It Takes Time to Make A Point

Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis.

4) Also, Why Are We Using Fake Content? Let's Make Some Real-ish Content.

By using real content, we can see the variation inherent in what this site might present. And we can design for those real world needs.

5) Look At That

Doesn't that look yummy?

6) See how this layout is broken?

That's because floats are really crap at handling layout. We've been using a screwdriver as a hammer. It sort of works, but badly.

7) The New CSS Will Fix Things

Finally we get some real hammers.

8) Several Kinds of Hammers

Grid, Flexbox, Alignment, Shapes, .

9) Size, Isn't That Magical!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.

10) All of These Headlines

Always three lines of text, which fits exactly in the available space. Describing where you will go when you click.

11) Are Exactly the Same

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.

12) Size, Isn't That Magical!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.

CSS Grid: Columns (Pure CSS Masonry Layout)