<h1>grid-sized paragraphs thanks to <code>calc-size()</code></h1>
<p>ℹ️ Each paragraph’s <code>width</code> and <code>height</code> is its <code>fit-content</code> rounded up to the nearest <code>50px</code>. This tanks to <code>calc-size()</code> and <code>round()</code></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Velit ea quisquam laborum rerum voluptas debitis voluptate a delectus tempore eum, dolore cupiditate explicabo nesciunt.</p>
<p>Quis modi voluptas recusandae cupiditate porro?</p>
<p>Aenean mollis id nisl condimentum dapibus. Ut fermentum purus urna. Nulla maximus in ligula vitae placerat. In hac habitasse platea dictumst.</p>
<p>Aliquam finibus elit id nulla aliquam, et iaculis odio fringilla. Mauris neque elit, vulputate vel viverra ac, pharetra quis quam. Maecenas eget urna mi. Fusce nec consequat diam. Integer odio sem, auctor sed vulputate quis, viverra quis mauris. Nulla pharetra nec turpis vel consequat.</p>
<p>Maecenas vitae felis aliquam, lacinia turpis non, ullamcorper est. Donec condimentum porttitor posuere. Sed lacinia ex urna, ac dictum quam malesuada id. Aenean et dapibus turpis, in sodales tortor. Ut bibendum ante quis nisl venenatis fringilla. Donec tortor quam, ullamcorper ac accumsan tristique, fermentum quis est. Maecenas sed lobortis ex. Aenean vestibulum risus ac cursus eleifend. Proin a vehicula purus. Nunc nec ex in nisl vestibulum eleifend at quis massa.</p>

@supports not (width: calc-size(auto, size)) {
  html::before {
    display: grid;
    place-content: center;
    content: "This demo requires calc-size() support.";
    position: fixed;
    inset: 0;
    z-index: 2;

    background: black;
    color: white;
    font-size: 2rem;
    text-align: center;
    font-family: system-ui, sans-serif;
  }
}

:root {
  --size: 50px;
}

h1, p {
  width: calc-size(fit-content, round(up, size, var(--size)));
  height: calc-size(auto, round(up, size, var(--size)));
}








@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  h1, p {
    background: rgb(0 0 0 / 0.25);
    margin-bottom: var(--size);
    padding: 10px;
  }

  h1 {
    background: rgb(0 125 0 / 0.25);
    margin-bottom: var(--size);
    font-size: 24px;
  }
  p:first-of-type {
    background: rgb(0 100 125 / 0.25);
  }
  
  html {
    font-family: system-ui, sans-serif;
  }

  body {
    margin: var(--size);
    background-color: white;
      background-image:
      linear-gradient(to right, rgb(0 0 0 / 0.1) 1px, transparent 1px),
      linear-gradient(to bottom, rgb(0 0 0 / 0.1) 1px, transparent 1px);
      background-size: var(--size) var(--size);
    position: relative;
  }
}