I am trying to copy google notes layout [duplicate] - html

Question

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 7 months ago.
I don't Know , if there is a solution, using css-grid?,
i have tried giving a max width to note-card but i dont want to remove height:max-content; this is because what if note has more than 30 words. thanks
.flex-container{
justify-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
}
here is my code
body{
background-color:black;
}
.flex-container div {
display: inline-block;
min-height: 1em;
height: max-content;
width: 12em;
padding: 5px;
border: 1px solid white;
border-radius: .5em;
margin: 4px;
color:white;
}
.flex-container{
justify-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
}
<div class="flex-container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, enim?</div>
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem animi similique placeat voluptatibus
nihil cupiditate!</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quis odit tenetur adipisci?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ab.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam distinctio dolores fuga sit culpa provident
modi ex ipsa aspernatur maiores?</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus exercitationem ex inventore
vel, quo natus esse quos veritatis deserunt hic commodi architecto suscipit ad, ipsa, nulla sapiente totam
dicta.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolorum similique dolores, est sequi
autem?</div>
</div>

Answer 1

So CSS has a columns property that let's you achieve this very simply, see solution below. Compatible with everything, even Internet Explorer. More info on MDN
:root { --gap: .5rem }
.columnLayout {
columns: 2;
column-gap: var(--gap);
padding: var(--gap) var(--gap) 0 var(--gap);
}
.columnLayout div {
display: inline-block;
margin-bottom: var(--gap);
}
/* BELOW STYLES FOR STYLING ONLY -- NOT RELEVANT TO ANSWER */
* { box-sizing: border-box } body{ background-color: black; color: white; font: 16px sans-serif; margin: 0 } .columnLayout div { border: 1px solid currentColor; border-radius: .5rem; padding: .5rem }
<div class="columnLayout">
<div>1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, enim?</div>
<div>2. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem animi similique placeat voluptatibus nihil cupiditate!</div>
<div>3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quis odit tenetur adipisci?</div>
<div>4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ab.</div>
<div>5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam distinctio dolores fuga sit culpa provident modi ex ipsa aspernatur maiores?</div>
<div>6. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus exercitationem ex inventore vel, quo natus esse quos veritatis deserunt hic commodi architecto suscipit ad, ipsa, nulla sapiente totam dicta.
</div>
<div>7. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolorum similique dolores, est sequi autem?
</div>
</div>
Alternatively, if you want to keep the left-right flow then you will need JavaScript for a "masonry" layout, if you can't / don't want to write the JS yourself there is a widely used library for this called Masonry JS