Use CSS Grid for Decorative Elements

I learned this trick in Rachel Andrew’s workshop.

HTML:

<h1>My heading</h1>

CSS:

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}

h1::before,
h1::after {
  content: '';
  border-top: 1px solid black;
  align-self: center;
}

In the code example provided, we can see how CSS Grid is used to style a heading. The “h1” element is selected in the CSS, and then the “grid” property is applied. This tells the browser to use CSS Grid to create a layout for the heading.

The “grid-template-columns” property specifies the number and width of the columns in the grid. In this case, there are three columns, with the center column set to “auto”. This means that the width of the center column will adjust automatically to fit the content within it.

The “gap” property sets the spacing between the columns and rows in the grid. In this example, there is a 1em gap between each column.

In addition to using CSS Grid to create the layout, the code also demonstrates how generated content can be used to add visual elements to the design. The “::before” and “::after” pseudo-elements are used to create horizontal lines above and below the heading. The “content” property is set to an empty string, so the pseudo-elements do not actually generate any content. Instead, they are used purely for styling purposes.

Codepen Example

Use CSS Grid for Decorative Elements

Links