scottgruber.me

Layout 30: Using inline-grid

First attempt to use inline-grid on a type sheet for Roboto font

Screenshot of grid layout in Firefox

I used inline grid to create rows on two spans inside a paragraph. That wasy they would be children of the paragraph parent and not be affected by the grid applied to the parent. Sounds complicated, but quite simple. Here’s the two code snippets.

 .font-callout {
        display: inline-grid;
        grid-template-rows: 1fr 2fr;
        margin: 0;
        padding: 0.5em;
      }

      .font-callout > span:first-of-type {
        grid-row: 1 / 2;
      }

      .font-callout > span:last-of-type {
        grid-row: 2 / 3;
      }
footer {
  display: grid;
  grid-area: footer;
  grid-gap: 1vw;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}