Is there a way to arrange divs in a staggered layout similar to Google Plus

Google+ displays each post in a staggered layout, as shown in the image below:

https://i.sstatic.net/BIKzm.png

In my Android app, I used StaggeredGridView to achieve this view. However, I am struggling to figure out which library or CSS tricks are necessary to implement a similar layout on the web.

The height of each div is different, and using float:left did not produce the desired result. It created large spaces between the divs like this:

https://i.sstatic.net/2KUhc.png

How can I create divs with a layout similar to Google Plus? Are there any specific keywords to search for this type of design?

jqueryhtmlcss

Answer №1

You might want to consider implementing Flexbox.

.flexbox-container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}
.flexbox-container > div.column {
  width: 50%;
  padding: 10px;
}
...

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

My jQuery DataTables iDisplayLength seems to be malfunctioning. Any tips on resolving this issue?

Currently, I am faced with an issue when trying to retrieve a large amount of data from a MySQL database. To prevent overloading the server, I have set a specific display length for the jQuery Datatable options. However, it seems that despite my efforts to ...

phpjquerydatatablespagination

Troubleshooting a jQuery ajax error when sending data variables

Hey there, just a quick question for you: var h = $('#hebergeurJQUERY').val(); var t = $('#typeJQUERY').val(); function requestData() { $.ajax({ type: "GET", url: '12months/months.php', data : "hosting= ...

jqueryajaxget

I'm having trouble applying the correct toggle effect to the button that has a bootstrap class

I recently delved into learning jquery, and here's what I've been experimenting with: Adding a click event to the button selector (by tag name) to easily toggle text and class. The text part toggles smoothly with a conditional statement. However ...

jquerybootstrap-4

Connecting to a particular destination on an external site

Can I add a link on my website that directs users to a specific location on another website, similar to an anchor tag but without creating the anchor point myself? I have a feeling it might not be possible, but perhaps there is a clever workaround. ...

csshtml

Discovering elements with multiple classes using watir-webdriver

In this scenario, let's consider an element like the one below: <div class="first_class second_class"></div> Now, we can locate it by its classes using the following methods: browser.div(class: 'first_class') browser.div(class ...

htmlcssrubyseleniumwatir-webdriver

The issue of Jquery .click event handler failing to work for class selector specifically in CHROME

Is there a way to achieve the same opacity effect on click as on mouseover? I've tried various selectors without success. Any help on this issue would be greatly appreciated. Thank you in advance! .container { position: absolute; background:url(&a ...

jqueryhtmlcsseventhandler

JQuery for Seamless Zoom Functionality

I am working with some divs that have images as backgrounds, and I have added a zooming effect on hover. However, the zoom effect is not smooth. Is there a way to modify the script to make the zoom effect smoother? Here is an example of my HTML structure: ...

javascriptjqueryhtml

Formatting Text in CSS and HTML

I need help aligning three images horizontally with text underneath, using CSS. Despite trying multiple methods, the images remain vertically aligned and the text does not align properly with the images. #img_cont { display: table; width: 90%; ...

htmlcss

Extracting the content attribute from this code using BeautifulSoup: How can I achieve this?

I am struggling to extract the "content" attribute from the following HTML code: <meta name="description" content="Definition: What is a leadership performer?"/> My aim is to scrape "Definition: What is a leadership performer?" f ...

htmlbeautifulsouppython-requeststags

Is it possible to populate a jQuery auto complete field with values that are chosen from a different jQuery autocomplete field beforehand?

Currently, I am implementing jQuery UI's auto complete feature in my form. The form consists of two sections - the second section is displayed only after submitting the first one. In the second section, I need to pre-populate another auto complete fie ...

jqueryjquery-uijquery-pluginsautocompleteauto-populate

Creating a dynamic slideshow with automated arrow navigation is simpler than you may think

I have successfully tested the slideshow and it is functioning perfectly without any issues. I would like to have a dual slideshow setup (slideshow 1 and slideshow 2) with next and previous buttons, but I am interested in adding an automatic sliding featur ...

javascripthtmlcss

retrieve the data attribute of a link within an unordered list

I have been attempting to extract a data attribute from a link within a list when it is clicked on. $(document).on('click', "ul.pagination li a", function(e) { e.preventDefault(); var page = $(this).attr("page"); var article_id = get ...

jqueryhtml

Continuously duplicating DOM elements while appending

I am currently working on populating the DOM with an array of character images using jquery. jquery for (var i = 0; i < character.length; i ++) { let combatantChoice = $('<div>'); combatantChoice.addClass('col-md-3 ...

jqueryhtml

Attempting to activate template rendering with Meteor session

I'm currently facing an issue with Meteor sessions and how my code is triggering the rendering of a template. At the moment, I have a session that sets its ._id to whatever is clicked. Template.sidebar.events({ /* on click of current sidecat class ch ...

javascriptjquerymeteorhandlebars.js

Having an issue with Local Storage returning undefined

I've been working on a form to input values and show the data on a different page after submission. Below is my form: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" hr ...

javascripthtmlcss

Utilize jQuery AJAX function to fetch a PDF document from a PHP file

My PHP file, example_061.php, successfully creates a PDF that works fine when returned. Now, I am attempting to call this file using jQuery AJAX to display it on my screen. Here is my code: $("#proba").click(function() { // Perform ajax after checking ...

javascriptphpjqueryajaxpdf

Activate a hyperlink from a distance

I have a side menu that includes a form for logging out (generated by MVC). Is there a way to set it up so that when the user clicks on the <li> element, it automatically triggers the log out link? I'm curious if using inline Javascript or anot ...

jqueryhtmlasp.net-mvc

Organize divs sequentially according to their text content using JQuery

Having encountered limitations in the functionality of a particular Wordpress plugin I am utilizing, I find myself faced with the challenge of sorting a customized dropdown in a specific sequence. Is there a way to employ jQuery to target these divs and ar ...

javascriptjqueryhtmlwordpress

Utilizing the power of SimpleHTMLDom to retrieve high-resolution images through an advanced Google search

I want to display a large image that was retrieved from Google using simple_html_dom.php include_once( "simple_html_dom.php" ); $key="unique"; $html = new simple_html_dom(); $html=file_get_html('http://images.google.com/images?as ...

phphtmldom

Stop using the bootstrap dl-horizontal class for responsive design

I utilized Bootstrap to design a list and used the dl-horizontal class in the following way: <dl class="dl-horizontal"> <dt>1</dt> <dd>deta1</dd> <dt>1</dt> <dd>deta1</dd> <dt>1</dt> ...

htmlcsstwitter-bootstrapresponsive-design