Is it possible to create a masonry-style layout with two columns that is responsive without

Is there a way to organize multiple divs of varying heights into two columns that display immediately one after the other, without relying on JavaScript or libraries like packery or masonry?

I've experimented with using display: inline-block in this jsbin example

I also attempted the technique described in Easy Masonry Layout With Flexbox, shown in this jsbin link.

Structuring the DOM into separate columns isn't ideal as they should collapse into a single column on mobile devices.

https://i.stack.imgur.com/oXQ15.jpg

Using inline-block results in an unwanted gap between the columns as illustrated here:

https://i.stack.imgur.com/9ehjd.jpg

EDIT: Updated diagrams for clarity - looking for left-to-right columns with no gaps between them

htmlcssflexbox

Answer №1

To ensure that your divs are displayed side by side, it is recommended to apply the float:left css style to all of them.

<div style="float:left; display:inline-block;">
   This will effectively position the divs next to each other.
</div>

I trust this advice proves beneficial for you.

Answer №2

Feel free to implement CSS columns into your design without concern for browser compatibility issues. Although older versions of Internet Explorer may present challenges, they should not hinder most users. While there are still some quirks to navigate when using CSS columns, I have successfully integrated them into several projects with no major issues. In today's web development landscape, CSS columns offer the best solution for achieving a masonry-like layout without relying on JavaScript.

Answer №3

If you're looking for a solution to use flex in your CSS layout, the following code snippet may be helpful:

.flex-container {padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; }
.flex-item {background: tomato; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } 
#fl-item{height:200px;}

When it comes to implementing this in HTML, you can use the following structure:

<ul class="flex-container">
  <li class="flex-item" id="fl-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

To see this code in action, check out this Plunker link.

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

Display the elements of a div at a reduced size of 25% from its original dimensions

I'm currently developing a JavaScript-based iOS simulator that allows users to view their created content on an iPhone and iPad. This involves using AJAX to load the content/page into the simulator, but one issue is that the simulator isn't life- ...

javascripthtmlioscssios-simulator

Why is the image cut in half on mobile devices but displaying correctly on computer screens? Could it be an issue with

There seems to be an issue on mobile screens that does not occur on computer screens. When the user clicks on the image, it disappears, and when they click another button, it reappears. However, there is a problem with how the image appears - it is cut off ...

javascriptjqueryhtmlcss

Scrolling to a specific anchor in a React webpage when the URL is opened in

Imagine having a component "Post" that contains multiple components "Comment". How can we make the application automatically scroll down to a specific comment when entering a URL like this: /post/:postId/#commentId The route for postId /post/:postId is a ...

javascripthtmlreactjs

How do I stop Bootstrap from taking over my custom navbar design?

My website's navbar stopped working after adding Bootstrap to my HTML pages. I suspect that Bootstrap is overriding my custom CSS. Here is the code for my navbar: .navbar { overflow: hidden; !important; background-color: #333; !important; } .. ...

htmlcssbootstrap-4thymeleafnavbar

Angular 11 - Binding Data to an Array Element

Currently, I am attempting to apply data-binding to specific properties of an element categorized as Ripe: export interface Ripe{ version: string; data_call_status: string; cached: boolean; data: { is_less_specific: boolean, ...

htmlangulardata-binding

Error with infiniteCarousel in Internet Explorer versions 7 and 8 when using jQuery

Hello everyone! I've run into a little issue with some jQuery code I'm using. It was working fine before, but after making several changes and improvements, I can't seem to figure out what the problem is. I keep getting JS errors in both IE7 ...

javascriptjqueryhtmlcssinternet-explorer

Issues persisting with the fixed header functionality in Bootstrap table

I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody. For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if th ...

csstwitter-bootstrapbootstrap-table

What is the best way to receive a user's input date in Dynamics 365 using HTML/JavaScript?

My HTML webform is set up to capture user input like address, card number, city, and state in text format. However, within Microsoft Dynamics 365, I have a custom entity with fields for this information. When a user completes the webform and submits it, a ...

javascripthtmldynamics-crm

Utilizing React's Conditional Rendering Alongside Bootstrap to Maintain the Layout Intact

I'm currently developing a project using React and Bootstrap that involves incorporating a large bar graph with two smaller boxes, all positioned horizontally together. To visualize how it should appear, please expand the pen window to see them arran ...

javascripthtmlcsstwitter-bootstrapreactjs

What is the accurate method of sending form data to the SQL database?

This is the data submission form I am using: <p align="center" style="color:#F00;"> <?php echo $msg; ?> </p> <form class="form-horizontal style-form" name="form1" method="post" action="Create-jobs.php" onSubmit="return validate(); ...

phphtmlsqldatabase

I must update a bootstrap class name within multiple layers of divs by referring to the parent class

My code structure is set up like this: <div id="main-parent"> <div class="child2"> <div> child2 </div> </div> <div>child3</div> - - - - <div class="ch ...

javascriptjqueryhtmlcss

What is the reason that preventDefault fails but return false succeeds in stopping the default behavior

I'm having trouble with my preventDefault code not working as expected. While using return false seems to work fine, I've heard that it's not the best practice. Any ideas why this might be happening? if ($('.signup').length == 0) ...

javascripthtmlajaxjquery

When using React, I noticed that adding a new product causes its attributes to change after adding another product with different attributes on the same page

Imagine you are browsing the product page for a Nike T-shirt. You select black color and size S, adding it to your cart. The cart now shows 1 Nike T-SHIRT with attributes color: black, size: S. However, if you then switch to white color and size M on the ...

javascripthtmlcssreactjsarrays

Whenever I implement JavaScript validation on my HTML page, it causes the page to become un

Whenever I try to enter more than 30 to 40 characters in the password input field on my HTML page, all web browsers become unresponsive. This issue persists even if I modify the minimum length and other requirements to 50. I am new to JavaScript. <!D ...

javascripthtml

unable to expand navbar in Angular 5 project with Bootstrap 4

I am encountering an issue with my navigation bar in a project that uses Angular5 and Bootstrap4. The navigation bar is supposed to expand when the screen size is small, as indicated by the navbar-expand-sm class in Bootstrap4. However, the navbar remains ...

htmlcssangulartwitter-bootstrapbootstrap-4

The whitespace issue stems from the div element __next-build-watcher generated by next js and usecontext

There's a notification bar at the bottom of my page that lets the user know when their email has been sent. This bar is generated using useContext in React/Next.js. To see the code, check out this Codebox link: Code However, I've noticed there ...

javascripthtmlcssnext.js

Is it possible to leverage AngularJS string interpolation ({{}}) within the jQuery HTML function?

I am attempting to implement angularJs string interpolation within the Jquery html function $('#existingScoresForWeek').html("<p>{{1 + 1}}</p>"); Unfortunately, the code above is not displaying the Result as 2 <div data-ng-app=" ...

jqueryhtmlangularjsangularjs-interpolate

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

In need of some creative brainstorming, I'm working on a website design featuring ten overlapping cards. When the mouse hovers over a card, it expands while others move away. My goal is for each card to return to its original position once the cursor ...

javascripthtmlcssdom

"Enhancing User Interaction with jQuery Hover State Dropdown Menus

Here's my issue: I've created a drop-down menu and I want the text color to change when hovering over the menu. Additionally, I'd like the hover state to remain active when hovering over the submenu. Currently, I'm using this code: $( ...

javascriptjquerycsshoverdrop-down-menu

SDTT: "Please ensure that the image field has a value before continuing"

I recently added this code snippet to a LocalBusiness listing (using guidance from this resource): <div itemscope itemtype="http://schema.org/LocalBusiness"> <div itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject"> ...

htmlimageschema.orgmicrodatagoogle-rich-snippets