0

For my Todo application, I want to display auto adjustable blocks as like Google Keep.

I've looked into this post How to accomplish something like Google Keep layout. It works fine with the images but not the text content which is coupled with block(for ex: <div>). But it didn't help me out.

.container{
 
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: .5rem; /* Chrome, Safari, Opera */
  -moz-column-gap: .5rem; /* Firefox */
  column-gap: 0.5rem;
}
div div:not(:first-child){
  margin:10px 0;
}
<div class="container">
  <div style="background:#3ff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae dignissim tellus. Curabitur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Aenean rutrum fringilla augue at dignissim.</div>
  <div style="background:#aff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae dignissim tellus. Curabitur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Aenean rutrum fringilla augue at dignissim.</div>
  <div  style="background:#2fe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae dignissim tellus. Curabitur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Atur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Atur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Aenean rutrum fringilla augue at dignissim.</div>
  <div style="background:#a9e">Hi My content is Aenean rutrum fringilla augue at dignissim.Aenean rutrum fringilla augue at dignissim.</div>
  <div style="background:#ae9">content</div>
  
</div>

I want each block to be displayed as a fresh block not as a continuation of another. Also it should accomodate the top spaces (incase of new row).

I don't want to use any of the third party bundles.

TylerH
  • 20,799
  • 66
  • 75
  • 101
nmkyuppie
  • 1,456
  • 1
  • 14
  • 30
  • The thing that you are trying to make is called as masonry gallery. You can get a bunch of tricks if you go for a google search. – Rajendran Nadar Dec 06 '17 at 14:13
  • @RaajNadar i do not want to use any of the third party plugins – nmkyuppie Dec 06 '17 at 14:16
  • ticks = tutorials not third party plugin – Rajendran Nadar Dec 06 '17 at 14:18
  • Possible duplicate of [CSS-only masonry layout but with elements ordered horizontally](https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally) – TylerH Dec 06 '17 at 16:04
  • @TylerH Yes I'd a look. If my content is dynamic, I can't assign n number of classes. Tall could be Taller, Taller could be short @ sometimes. – nmkyuppie Dec 07 '17 at 07:00
  • @nmkyuppie if you don't know the number of containers or elements then you will need to use JS. The masonry.js library exists specifically for this purpose. – TylerH Dec 07 '17 at 14:10
  • I've clearly mentioned in my question that I don't want to use third party js. Even I've given my tried work, modification in my code or simple psedo is that I want. @TylerH – nmkyuppie Dec 07 '17 at 15:36
  • @nmkyuppie I understand that you don't want to use it, I'm just telling you that you have to in order to get what you want in your scenario. I don't want to pay taxes, but I have to in order to achieve my goal of staying out of jail for tax evasion. – TylerH Dec 07 '17 at 15:39

0 Answers0