Grid layout test

About

So this is to tryout using grid instead of an old style layout using different margins for the h2 and paragraph elements.

The challenge is to layout the page without changing the HTML, including adding extra divs.

This is achieved by setting the h2 element to grid-column: 1 / 2 and the paragraps to grid-column: 2 / 3.

Currently the grid section is just the h2's and paragraphs but it would no doubt be easy to include the h1 header and date paragraph.

Advantages?

With grid this layout was surprisingly easy to create. However I'm not sure it is better than simply using margins as it would have been done in the pre-grid era.

The old layout gives the h2's a maximum width (say 28%) and floats them to the left. The paragraphs then have a left margin set that is a little higher than the h2's width, say 30%.

With both solutions you can create this layout without adding any new HTML elements. The HTML is simple h2 followed by an x number of paragraphs.

The h2's have text-align: right and the grid has a column-gap: 1em; set to separate them from the main body text. There is no row-gap set as that would be between every paragraph. Instead, to separate the section there is a declaration for h2 and h2 + p to add a bigger top margin.

Idea for a layout website

I could make a web site dedicated to making different layouts like this.

One theme could be making layouts that can only be created from basic markdown files.

This design.

I quite like this old design. Things that make it work well are:

• plenty of whitespace, around both the h2's and h1
• careful choice of colours

Quaerat exercitationem id odit omnis laboriosam quisquam magnam suscipit, delectus dignissimos rem consequuntur recusandae harum inventore? Saepe qui placeat corrupti cumque illum!

Veniam officia autem corporis sit libero voluptatum molestiae, eaque nemo veritatis beatae? Sequi dolorum incidunt, ab deserunt suscipit repellendus nemo molestiae voluptatum.