There are always times when you are building a page with multiple columns and the content is a collection of headings and images just the same way as shown below or its varieties.
See the Pen line-step-height demo by Prateek Jadhwani (@prateekjadhwani) on CodePen.
If you see at the bottom of the page, the text is a little bit displeasing to look at. If you are someone who like to see typography in a perfect way, that starts at the same line, and ends at the same height.
So, the question is what can be done make it look more pleasing? Well, there is a new css property for that. Its called the line-height-step. All you need to do is add line-height-step property to you container css with height more than that of the line height, and thats it
This is what it looks like with line-height-step set to 18pt. Notice the end of the article. They all end on the same line.
See the Pen line-step-height demo2 by Prateek Jadhwani (@prateekjadhwani) on CodePen.
If you are more interesting in this css property, feel free to read about it in this editor’s draft.