JSFiddle - React, Tailwind, and code Playground
HTML
<article>
<section>text text text</section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text </section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
</article>
CSS
article {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(auto, 1px)) 1fr;
grid-template-columns: 1fr;
grid-row-gap: 10px;
height: 100vh; /* also works with min-height */
}
section { background-color: lightgreen; }
body { margin: 0; }