What is the best way to populate the open areas on a grid using HTML?

I'm facing an issue with my note-taking app where, in a grid layout, short notes leave empty space. How can I push the cards below to move up and stick to the top card? I am currently using Bootstrap's grid layout for displaying the cards. You can find more information about it here.

I have attached a screenshot showing how the cards currently appear: https://i.sstatic.net/HlppU.png

You'll notice there is a gap between the cards that I would like to fill up.

Here is the template for a single card:

let cardTemplate = `
    <div class="col-sm-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">${title.value}</h5>
                <p class="card-text">
                    ${content.value}
                </p>
                <a href="#" class="btn btn-outline-primary showBtn">Show More</a>
                <a href="#" class="btn btn-outline-danger deleteBtn">Delete</a>
                <a href="#" class="btn btn-outline-success editBtn">Edit</a>
            </div>
        </div>
    </div>`;

This card template is inserted into a div whenever a button is clicked.

<!--displaying notes-->
    <div class="row"></div>

I haven't styled the div as I like its current appearance. Thank you for taking the time to read my query!

javascripthtmlcssbootstrap-4

Answer №1

If you're searching for a way to achieve that specific layout, consider using the masonry grid property. By utilizing grid-template-rows:masonry;, you can create the desired effect effortlessly. For detailed instructions on implementing this, check out this informative guide.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an HTML table using a PHP array is a straightforward process that allows for

Is there a way to create an HTML table using a PHP Array? Below is the PHP code: function get_location_list() { global $connect; $query = "select location , SUBSTRING_INDEX(SUBSTRING_INDEX(location,'-',1),'-&apo ...

javascriptphphtmlarrayshtml-table

The process of embedding one script into another script is underway

I've been struggling to optimize the loading of a responsive/mobile page, but then I came across a jQuery plugin that dynamically toggles elements based on screen width. This seemed like the perfect solution as it eliminates the need for extra HTTP re ...

javascriptjqueryhtml

Update the content of the h5 tag dynamically as the new div's data attribute is revealed by scrolling into view

I would like to dynamically update the h5 tag text based on the data attribute of the current div when it comes into view. The CSS is configured so that each .bar class div occupies 100% height, with only one visible at a time. I have successfully implemen ...

jqueryhtmlfunctiontextattributes

Creating a many-to-many relationship in Sequelize using a join table to insert data

I recently set up two models in sequelize with a many-to-many relationship. While Sequelize successfully created the join table, I am facing difficulties when trying to insert data into it. Despite going through the documentation section on associations ...

javascriptnode.jsreactjssequelize.jssequelize-cli

Attempting to align the text on a single line

Hey there, I have a quick question about my website. I followed some advice and everything is working great, but now I have an issue with a space between the tables. I wanted to attach a file, but it seems I don't have enough reputation yet. If you ...

html

I seem to be encountering an issue with storing data properly within the for loop - can anyone point out where I may

Within my code, I am iterating through results.data.data.length and successfully retrieving the correct data while storing it appropriately. The data: param1 = [6, 27, 34, 22, 23, 25, 28, 24, 26, 30, 29] // => array length 11 The issue arises when att ...

javascriptreactjs

What is the best way to retrieve the specific property from a bound function?

I'm looking to retrieve the value of a specific property from a function that has already been bound. function foo(){ console.log(this.a) } const bar = foo.bind({a:1}) bar() // Outputs 1 bar.getThis() // expected result is { a: 1 } Given the code ...

javascriptthis

What is the process behind Twitter's ability to quickly show my profile?

Scenario I was intrigued by the different loading times of Twitter's profile page based on how it is accessed: Clicking the profile link in the menu results in a 4-second load time with DOM and latest tweets loade ...

javascriptajaxsessiontwitterlocal-storage

Guide on utilizing jQuery to read and insert a local HTML file directly into a textarea

What is the best way to load a local HTML file in raw format and insert it into a textarea using jQuery version 1.3? ...

jqueryhtmltinymce

Implementing Decimal Input in Bootstrap-Vue for Google Chrome on Android

Issue is isolated to Google Chrome for Android (version 90.0.4430.210) and not present in other browsers. We have an input field that only allows numeric characters, structured like this: https://i.sstatic.net/zi4qn.png <b-form-input v-model="m ...

javascripthtmlvue.jsbootstrap-vuehtml-input

The link only seems to function properly after being refreshed

I'm currently creating a mobile site using JQuery Mobile. I have multiple pages within my foobar.html and navigating like this: <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" ...

htmljquery-mobile

Ways to adjust the width of grid columns within an implicit row

I am curious about changing grid columns on an implicit row. While I won't provide the exact code that I'm working on, I will offer a brief example to clarify my question. <div class='container'> <p>item-1</p> <p& ...

csscss-grid

Waiting for the execution of JavaScript in Selenium-Webdriver is essential for ensuring the

Currently, I am utilizing selenium-webdriver in nodeJS instead of Java. My issue lies with using this.getPageSource(), as it returns HTML without waiting for the execution of JavaScript. Consequently, some elements that are loaded by JS do not appear in t ...

javascriptseleniumselenium-webdriver

Google Script: Implementing multiple conditions based on unique identifiers

A custom script has been designed to keep track of the frequency of VIN numbers repetitions and the status of parts arrival for each unique VIN Number (Car). For instance, if a VIN number appears 5 times, it indicates that five parts are expected to arriv ...

javascriptloopsgoogle-apps-scriptgoogle-sheetsconditional-statements

Is there a way to refresh angular bindings using data retrieved from a getUserMedia stream?

I'm currently using getUserMedia to capture an audio stream. The audio stream is only accessible within the getUserMedia callback function. However, I have encountered an issue where Angular fails to detect changes and update the bindings when I attem ...

javascriptangularjsgetusermedia

Showing the outcome of a PHP function within a div container

While working on my WordPress site, I've implemented user registration and login functionality. However, I'm not a fan of the default 'admin bar' and would rather create a custom navigation bar. I am looking for a way to dynamically loa ...

javascriptphphtmljsonwordpress

Most efficient method to upload numerous images without any lag

I have a website where images are loaded only when they are slightly below the viewport. This method allows the site to load initially without images and then determine which ones need to be loaded based on the user's viewpoint. When a user scrolls ...

javascripthtmlimage

Guide to separating the bytes of a number and placing them into an Uint8Array

I am looking to convert a JavaScript number into the smallest possible uint8array representation. For example : 65 535 = Uint8Array<[255,255]> (0b1111111111111111 = [0b11111111, 0b11111111]) 12 356 = Uint8Array<[48,68]> (0b0011000001000100 = [ ...

javascripttypescriptbinary

Optimal Approach for Managing ASP.NET Ajax Modal with MouseOver - Data Retrieval Only Upon Request

I'm interested in developing a modal popup that dynamically fetches the data inside it upon mouseover, instead of preloading all the data beforehand. Are there any scripts or frameworks available that would simplify this task? ...

javascriptasp.netajaxmodal-dialogmodalpopupextender

The text content is not in alignment with the server-rendered HTML for translation purposes with i18n

I have successfully implemented i18n in my Next.js project. The folder structure for my locales is as follows: public/locales/en/translation.json and public/locales/fr/translation.json The error I am encountering is: Uncaught Error: Text content does n ...

javascriptreactjsnext.jsserver-side-renderingi18next