Tips for setting up a grid where boxes have a consistent width but varying heights to maximize space utilization

Seeking design inspiration from Pinterest, where fixed width columns are used but each grid item fills all available space with varying heights. Check out this example:

https://i.sstatic.net/i2WDo.jpg

Initially considered using flexbox for this layout, but faced some challenges. Here's what was attempted:

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      align-items: flex-start;
    }

    .flex-item {
      margin: 10px;
      background-color: #3299bb;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
  </style>
</head>
<body>
<div class='flex-container'>
  <div class='flex-item' style='height: 200px; width: 800px;'>
    <p>#1</p>
  </div>
  <div class='flex-item' style='height: 50px; width: 200px;'>
    <p>#2</p>
  </div>
  <div class='flex-item' style='height: 50px; width: 200px;'>
    <p>#3</p>
  </div>
</div>
</body>
</html>

Question is straightforward - how can CSS be set up to achieve this particular design?

Answer №1

If you're looking for a solution, check out this fantastic plugin that is perfect for the job.

It's compatible with both jQuery and Vanilla JS, making it versatile for various projects.

Alternatively, you can also achieve a similar result using CSS alone.

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

Is there a clash between ng-if and col col-50?

Currently, I am attempting to create a table using Angular code within HTML. The structure of the table is exactly how I want it to be, and here is the code snippet representing it: <div class="row"> <div class="col col-25">Date</div> ...

What is the best way to eliminate the border around an image when including a hyperlink?

There seems to be a rectangle showing up outside the link that I would like to remove. How can I get rid of it? No Image <a href="~/Web Pages/Home.aspx" runat="server"> <img src="<%= ResolveUrl("~/Images/TestToday.png") %>" alt="No im ...

Preventing duplicate submissions in Ajax by serializing form data

I'm having trouble preventing double submissions on my form when I rapidly press the button that triggers a click event. I attempted to disable the button after a successful submission, but it still submits twice. Here is my code: <script> $(do ...

Position the div beneath another div using the display:grid property

I can't seem to figure out how to position a div below another div using display:grid. The div is appearing on top instead of below. The "app-bm-payment-card-item" is actually a custom Angular component. Here's the HTML file: //div wrapper < ...

The width property is not being passed down to the table

I'm experiencing difficulties with the scaling of my body content. When the page is initially opened, it scales to 100%. However, when I resize the screen to make it wider, the content gets bigger but when I try to make it smaller again, it remains a ...

Monitor the traffic on my website by implementing .htaccess restrictions

I am maintaining a website with restricted access to specific IP addresses listed in the .htaccess file. I am looking to implement a logging system that tracks unauthorized attempts to access the site. Is it feasible to record each attempt in a database? ...

unable to execute PHP code

I am attempting to execute a PHP file that will update a database. On Chrome, I am encountering this error: https://i.sstatic.net/3ruNL.png This is the code I have in my index.html file: <!DOCTYPE html> <html> <body> <input type ...

Implementing the Fixed Header feature in DataTables - A Step-by-Step Guide

I'm encountering an issue with implementing a fixed header for my table using the DataTables plugin. Despite previously asked questions addressing similar problems, I am still unable to resolve it. I suspect that conflicting CSS or missing CDN links c ...

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

There are 12 image icons displayed in a row within div elements using display: inline-block. However, when the browser window is resized, I would like the icons to be arranged on two or more rows so that each row contains an equal number of icons. ...

The pseudo class remains unaltered

I've been experimenting with creating pop up links that appear next to a button when the button is clicked. So far, I've tried using various CSS selectors like :active and :hover without success. Additionally, I attempted to use selectors such a ...

What is the best way to incorporate a fadeIn effect while using the .attr method?

I am working with a line of code that switches between classes class1 and class4 to update the background of my website. I would like to incorporate a fadeIn effect each time the class changes. Can you help me with this? Thank you! Below is the code snipp ...

Windowing box inside a container box

I am looking to implement scrolling for just the "chat-messages" div within the "chat-bar" div on my site. I want only this specific section to be scrollable, while the rest of the site remains stationary. Currently, I have to scroll through the entire pag ...

Positioning children within a div element

Howdy! I have a neat little setup with two divs stacked on top of each other, each containing child elements. My goal is to hide the first div and have the second div seamlessly take its place while keeping the child elements in their original position. C ...

Restricting CSS Background Image Width to 960 Pixels

My CSS style is causing my background image to span across the whole screen instead of repeating within the 960px width of the body. body { width:960px; margin: 10px auto 10px auto; background-image:url(logo.png),url(backgroundimage.jpg); ...

How can I store a value or text to track view counts or a counter efficiently?

Recently, I've been trying to implement a view counter on my website, similar to what you see on YouTube. Currently, the number of views stands at 23. I managed to find some code that allows me to increment the view count every time I click on an imag ...

Creating a child div that is half the size of its parent

Is there a way for a child div to inherit half the width and half the height of its parent div without using specific values or viewport units? ...

Tips for keeping your avatar contained within a Bootstrap grid

I am attempting to adjust the positioning of my "image holder" (avatar) with a top and bottom margin of 3px, but when I implement this change, the image holder shifts outside of the grid. Below is the code snippet in question: <div class="container con ...

Removing the dividing line between columns in an Antd table: A simple step-by-step guide

Do you notice the lines dividing each table column heading in the image? I want to get rid of these lines from the table. The table component I am using is Antd table. https://ant.design/components/table#examples https://i.stack.imgur.com/Npx5G.png ...

Create a speech bubble using only CSS, featuring a partially see-through background and a stylish border

I wish to design a speech bubble using only CSS. There are specific requirements I need to meet: It should adjust its size based on content with some padding or a set size. The background color must be semi-transparent. You must be able to define a borde ...

Guide to collapsing all menus in an Angular 4 Accordion

I am a beginner with Angular 4 and I have implemented an accordion with the structure of Categories, Groups, and Subgroups. When I click on a category, it displays all the groups within that category. Similarly, when I click on a group, it shows all the s ...