Layout 30: Using inline-grid

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

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));

Tagged with

← Previous Layout 29: For Lemmy Layout 31: Interaction of color Next →