6I am trying to create grid layout and I want my row items to start where the row before that finished. How should I be able to do so ?
Here's the code.
.container{
display:grid;
grid-template-columns : repeat(3,1fr);
margin-top:0;
}
.container .item{
border:1px solid yellow;
align-self:start;
margin-top:0;
position:relative;
bottom:0;
}
<div class="container">
<div class = "item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper tellus eu purus faucibus, vel hendrerit diam sagittis. Ut non interdum elit, facilisis congue orci. Aenean sollicitudin sem at enim fringilla, sed porttitor libero porta. Nullam mollis sem justo, vitae tristique arcu euismod sed. Curabitur et volutpat nibh. Nunc lobortis tempor nibh. Vivamus a egestas elit, sed sodales tortor. Nulla
</div>
<div class = "item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper tellus eu purus faucibus, vel hendrerit diam sagittis. Ut non interdum elit, facilisis congue orci. Aenean sollicitudin sem at enim fringilla, sed porttitor libero porta. Nullam mollis sem justo, vitae tristique arcu euismod sed. Curabitur et volutpat nibh. Nunc lobortis tempor nibh. Vivamus a egestas elit, sed sodales tortor. Nulla bibendum metus nisi, eget accumsan justo porta vitae. Donec maximus, augue vel accumsan elementum, erat ipsum lacinia leo, id posuere risus neque a dolor. Fusce imperdiet pulvinar massa, quis rhoncus erat lacinia vel. Quisque porttitor libero a nisi aliquam, eget accumsan enim scelerisque. Morbi nisi augue, dignissim porttitor imperdiet eleifend, rhoncus vitae nunc.
Duis laoreet lectus quis est mollis, et dignissim sem laoreet. Nulla porttitor purus eget ullamcorper pellentesque. Etiam in elit eu elit venenatis convallis a ac orci. Nulla eleifend vitae felis non convallis. Nunc a odio et leo porttitor placerat sed ut sem. Nunc a tellus aliquam, viverra nisl a, ornare lectus. Vivamus id imperdiet nisl, sed dapibus tortor.
</div>
<div class = "item">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus volutpat eu orci non euismod. Nullam in mi aliquet urna pellentesque tristique tempus commodo erat. Cras sit amet ante sed diam suscipit tincidunt id vel est. Vivamus posuere lacus at velit molestie, eget malesuada metus eleifend. Mauris sed aliquet massa. Quisque laoreet rhoncus nisi, at lobortis augue posuere in. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</div>
<div class = "item new">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper tellus eu purus faucibus, vel hendrerit diam sagittis. Ut non interdum elit, facilisis congue orci. Aenean sollicitudin sem at enim fringilla, sed porttitor libero porta. Nullam mollis sem justo, vitae tristique arcu euismod sed. Curabitur et volutpat nibh. Nunc lobortis tempor nibh. Vivamus a egestas elit, sed sodales tortor. Nulla
</div>
<div class = "item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper tellus eu purus faucibus, vel hendrerit diam sagittis. Ut non interdum elit, facilisis congue orci. Aenean sollicitudin sem at enim fringilla, sed porttitor libero porta. Nullam mollis sem justo, vitae tristique arcu euismod sed. Curabitur et volutpat nibh. Nunc lobortis tempor nibh. Vivamus a egestas elit, sed sodales tortor. Nulla bibendum metus nisi, eget accumsan justo porta vitae. Donec maximutortor.
</div>
<div class = "item new2">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus volutpat eu orci non euismod.
</div>
</div>
Thanks in advance for your help! Highly appreciated!