I'm trying to create a three column layout that has an article of text in the center column, and autofills a dynamic number of smaller "cards" of content on the left and right. I've included example of what I'm able to successfully create with my knowledge of grids. However, this requires knowing that there were four cards to fit in the columns, because I've written there should be two rows. Is there a way to make the number of rows a dynamic value?
.grid {
display: grid;
grid-template-columns: 150px 1fr 150px;
grid-template-rows: auto auto; /* How can I make this a dynamic length */
grid-auto-flow: column dense;
align-items: center;
grid-gap: 5%;
}
article {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: -1;
}
.card {
text-align: center;
font-size: 80px;
}<div class="grid">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut posuere libero. Praesent consectetur mi turpis, nec auctor diam fermentum vehicula. Praesent sed lectus at augue egestas vestibulum. Suspendisse vulputate nisi eu nulla imperdiet volutpat.
Praesent ut nisi nunc. Aenean eleifend erat nec finibus molestie. Nunc dictum varius neque sed luctus. Etiam pretium nibh id ante porttitor commodo. Aenean vestibulum enim eget ex egestas convallis. Aenean luctus quam eu est efficitur, vitae accumsan
lorem scelerisque. Vivamus eros neque, hendrerit quis dolor sed, faucibus fringilla mauris. Integer sodales ipsum nec suscipit venenatis. Morbi vitae tristique nunc.</p>
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam lacinia luctus turpis, id rhoncus purus. Quisque venenatis quam volutpat urna lacinia, ac auctor neque ullamcorper. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Vestibulum tristique accumsan enim sed ultricies. Cras vestibulum est ac commodo pulvinar. Vivamus efficitur, odio sit amet aliquet faucibus, quam erat elementum nulla, scelerisque dignissim augue
sapien eu velit. Vestibulum pretium orci nulla, vel ultricies mauris dignissim a. Maecenas et congue odio. Nunc quis justo vitae ex ultrices tempus. Suspendisse facilisis auctor gravida. Sed eu purus eget enim luctus vestibulum eu ac ipsum. Nunc
vestibulum pellentesque velit, at dignissim leo cursus a. Praesent viverra eros a tempor condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Suspendisse ullamcorper semper turpis eu gravida. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vitae nibh nec purus tempor maximus. Integer ut aliquam nibh. Phasellus eu varius elit. Aliquam at lacus
non orci efficitur gravida. Ut vulputate porta libero, quis fermentum risus sagittis non.</p>
<p>Sed ultrices efficitur nibh, eget hendrerit felis condimentum egestas. Aenean porta ullamcorper neque vitae tincidunt. Vestibulum eget scelerisque sapien. In hac habitasse platea dictumst. Suspendisse iaculis nibh tortor, at posuere nulla fermentum
eget. Proin lobortis lectus et diam commodo suscipit. Mauris posuere ante turpis, quis bibendum neque commodo at. Praesent viverra magna elit, quis aliquet magna efficitur quis. Aliquam vel enim eget est semper pretium.</p>
<p>Nunc laoreet turpis ut tempus venenatis. Phasellus ipsum nisl, malesuada in ex ac, lacinia efficitur odio. Praesent blandit sodales justo, eu cursus dolor vestibulum eu. Nullam tempor massa efficitur hendrerit congue. Morbi consectetur augue non neque
finibus tempor. Nam in accumsan justo. Quisque semper condimentum dictum. Donec convallis hendrerit elit eu suscipit. Fusce a ligula pretium, pharetra leo eget, convallis augue. In vestibulum interdum ligula, nec gravida sapien pharetra non. In
egestas sapien in facilisis rhoncus. Aenean efficitur magna bibendum, feugiat quam in, dapibus mauris.</p>
</article>
<aside class="card">
</aside>
<aside class="card">
</aside>
<aside class="card">
</aside>
<aside class="card">
</aside>
</div>