I am designing a website in which the user fills a survey and information is posted on a card. I need a design that will support adding elements - three columns and infinite rows. I have tried looking at questions that other people have asked but none of them are helping. Here is what I have;
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html, body {
height:100vh;
}
.griditem {
width:31vw;
height:min-content;
padding:1vmax;
border:2px solid red;
}
body {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:3vh;
color:red;
font-family:arial;
font-weight:bolder;
}<div class="griditem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ducimus tempore nemo suscipit sint pariatur at natus ex adipisci ipsum, consectetur eveniet odio ratione repellat delectus iste excepturi sed quaerat.</div>
<div class="griditem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt illum maiores quibusdam consectetur ipsa, unde mollitia repellendus voluptate temporibus ipsum perspiciatis ipsam repellat distinctio beatae molestiae esse eos harum.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem nemo perspiciatis repudiandae consectetur ab sunt? Aperiam rerum minus accusantium error, eaque reiciendis enim a ipsa voluptatem dicta porro eveniet quam?
</div>
<div class="griditem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt illum maiores quibusdam consectetur ipsa, unde mollitia repellendus voluptate temporibus ipsum perspiciatis ipsam repellat distinctio beatae molestiae esse eos harum.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem nemo perspiciatis repudiandae consectetur ab sunt? Aperiam rerum minus accusantium error, eaque reiciendis enim a ipsa voluptatem dicta porro eveniet quam?
</div>
<div class="griditem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt illum maiores quibusdam consectetur ipsa, unde mollitia repellendus voluptate temporibus ipsum perspiciatis ipsam repellat distinctio beatae molestiae esse eos harum.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem nemo perspiciatis repudiandae consectetur ab sunt? Aperiam rerum minus accusantium error, eaque reiciendis enim a ipsa voluptatem dicta porro eveniet quam?
</div>
<div class="griditem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt illum maiores quibusdam consectetur ipsa, unde mollitia repellendus voluptate temporibus ipsum perspiciatis ipsam repellat distinctio beatae molestiae esse eos harum.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem nemo perspiciatis repudiandae consectetur ab sunt? Aperiam rerum minus accusantium error, eaque reiciendis enim a ipsa voluptatem dicta porro eveniet quam?
</div><div class="griditem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ducimus tempore nemo suscipit sint pariatur at natus ex adipisci ipsum, consectetur eveniet odio ratione repellat delectus iste excepturi sed quaerat.</div><div class="griditem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ducimus tempore nemo suscipit sint pariatur at natus ex adipisci ipsum, consectetur eveniet odio ratione repellat delectus iste excepturi sed quaerat.</div>
<div class="griditem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt illum maiores quibusdam consectetur ipsa, unde mollitia repellendus voluptate temporibus ipsum perspiciatis ipsam repellat distinctio beatae molestiae esse eos harum.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem nemo perspiciatis repudiandae consectetur ab sunt? Aperiam rerum minus accusantium error, eaque reiciendis enim a ipsa voluptatem dicta porro eveniet quam?
</div>
<div class="griditem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt illum maiores quibusdam consectetur ipsa, unde mollitia repellendus voluptate temporibus ipsum perspiciatis ipsam repellat distinctio beatae molestiae esse eos harum.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem nemo perspiciatis repudiandae consectetur ab sunt? Aperiam rerum minus accusantium error, eaque reiciendis enim a ipsa voluptatem dicta porro eveniet quam?
</div><div class="griditem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ducimus tempore nemo suscipit sint pariatur at natus ex adipisci ipsum, consectetur eveniet odio ratione repellat delectus iste excepturi sed quaerat.</div><div class="griditem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ducimus tempore nemo suscipit sint pariatur at natus ex adipisci ipsum, consectetur eveniet odio ratione repellat delectus iste excepturi sed quaerat.</div>
<div class="griditem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt illum maiores quibusdam consectetur ipsa, unde mollitia repellendus voluptate temporibus ipsum perspiciatis ipsam repellat distinctio beatae molestiae esse eos harum.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem nemo perspiciatis repudiandae consectetur ab sunt? Aperiam rerum minus accusantium error, eaque reiciendis enim a ipsa voluptatem dicta porro eveniet quam?
</div><div class="griditem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut ducimus tempore nemo suscipit sint pariatur at natus ex adipisci ipsum, consectetur eveniet odio ratione repellat delectus iste excepturi sed quaerat.</div>The real main problem I have, is that the rows height is based on the tallest element. I want each cell to have a different height based on min-content. I'm new to grid, and I don't know if flex is a better approach to this, but there is a lot of empty space after some tiny elements, like the first one, I need to somehow collapse it. The design has to be able to work with any size of and element, a small after a big right after each other (vertically) without the big space (but with gap).
