Menu
In Google Keep, they have a couple columns (depending on your viewport width) of equal width notes that they arrange to make it not look uniform.
How can something like this be accomplished? I'm guessing they have specific breakpoints at certain widths, and after accounting for the padding and margins, they make the image match the desired width, and simply let the image height maintain the same aspect ratio.
It's just my guess; how would it be done?
620
Keep's newest feature is the ability to collaborate in real-time, very similar to Google Docs, Sheets and Slides. Keep has also added the ability to filter by a range of criteria.
When it comes to creating a Google Keep list, the easiest way to do this is by making a checklist. When you create a new note, be sure to do so by hitting the New List button. This will insert one checkbox in your list and as you add more items to the list, more checkboxes will show up.
Top 14 Tricks for Using Google Keep like a Pro. 1 1. Add Checkboxes. Sure, you can add a note with just the tap of a button. But how do you make them look organized? Well, when it comes to Keep, ... 2 2. Color Code Them. 3 3. Doodle Your Imagination. 4 4. Add Tasks and Reminders. 5 5. Label Them Right. More items
Aside from its note-taking functions, Google Keep is a great app for to-do lists, too. If you want to rearrange your priorities to tackle your to-do list, you can drag-and-drop your notes. You can also assign a separate task to each note. However, here are some features that can enhance your Google Keep to-do list experience: 1. Pin Note
You can add items to a checklist easily and quickly: Click on the Tick mark at the side of the Note bar. Start by typing out the Title, and then add the items. Click Close, and your list will appear with your notes. In addition, Google Keep's checklist allows you to access it and check things off without opening up the note.
Install the Google Keep Chrome extension to bookmark a website by creating a note. The extension will also save the URL of the website in your note. Bookmarking these sources works well when you research a specific topic and find resources while searching the web. 4. Create voice notes on the go
A more simplistic solution might be to use the CSS column property, that way you can control the amount of columns in your breakpoints (also gutters).
Additionally it seems all together a good idea to me that if you can achieve the same effect without a bunch of explicit containers then you should. Obviously there are things to consider with flow that might make that decision for you. Hope this helps add to the above answer a bit.
.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: .5rem; } .note { width: calc(100% / 1); }<div class="container"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> </div>This is not a great example, but one thing you can do is use flex-box in columns.
.note { max-width: 100px; margin: 5px 10px; } div.container { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; background-color: lightgray; } div.column { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; background-color: lightgray; }<div class="container"> <div class="column"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> </div> <div class="column"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> </div> <div class="column"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg"> <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg"> </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
