I am trying to copy google notes layout

Question

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>

Simp4Code · Answer 1 · 2022-07-12T12:49:53.313

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

I am trying to copy google notes layout

1 Answers1