Ways to elevate cells of different sizes?

I am new to web design and have created a small portfolio gallery. Each 'card' in the gallery includes an image, title, and caption. However, I'm facing an issue where some cards appear larger due to longer captions. I want each card to adjust its position in a staggered grid layout.

Despite trying various CSS adjustments like changing margins and other tricks, I haven't been able to solve this problem.

<style>
    .column {
        float: left;
        width: 50%;
        align-content: inherit;
        padding: 5px 10px;;
        border-collapse: collapse;
    }
    .content {
        background-color: #F1F0F0;
        padding: 20px 20px 8px 20px;
    }
    h3 {
    color: #8A6E4B
    }

    @media screen and (max-width: 900px) {
      .column {
        width: 100%;
      }
    }
    @media screen and (max-width: 600px) {
      .column {
        width: 110%;
      }
    }
</style>

<div class="row">
  <div class="column">
    <div class="content">
      <img src="a/6711" />
      <h3>Title 01</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="a/6705" alt="Title 02" style="width: 100%;" />
      <h3>Title 02</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="content">
      <img src="a/6709" alt="Title 03" style="width: 100%;" />
      <h3>Title 03</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="a/6714" alt="Title 04" style="width: 100%;" />
      <h3>Title 04</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>
htmlcss

Answer №1

If you desire the content blocks to have consistent height, consider implementing a CSS grid:

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.content {
  background-color: #F1F0F0;
  padding: 20px 20px 8px 20px;
}

h3 {
  color: #8A6E4B
}
<div class="grid">
  <div class="content">
    <img src="a/6711" />
    <h3>Title 01</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <div class="content">
    <img src="a/6705" alt="Title 02" style="width: 100%;" />
    <h3>Title 02</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="content">
    <img src="a/6709" alt="Title 03" style="width: 100%;" />
    <h3>Title 03</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="content">
    <img src="a/6714" alt="Title 04" style="width: 100%;" />
    <h3>Title 04</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

If you would like to achieve variable heights (masonry layout), simply place your content divs within your columns:

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

.content {
  background-color: #F1F0F0;
  padding: 20px 20px 8px 20px;
  margin-bottom: 20px;
}

h3 {
  color: #8A6E4B
}
<div class="grid">
  <div class="column">
    <div class="content">
      <img src="a/6711" />
      <h3>Title 01</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div class="content">
      <img src="a/6705" alt="Title 02" style="width: 100%;" />
      <h3>Title 02</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="a/6709" alt="Title 03" style="width: 100%;" />
      <h3>Title 03</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="content">
      <img src="a/6714" alt="Title 04" style="width: 100%;" />
      <h3>Title 04</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis... 
    </div>
  </div>
</div>

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

Tips for adding an image into a PDF document using the jsPDF library in HTML

Due to the lack of support for utf8 characters in jspdf, I'm experimenting with replacing some characters with images before exporting to pdf. To illustrate, I've created a code sample where I insert an image into an html div and then attempt to ...

javascripthtmljspdf

Adding content from a dialog box to the body of an HTML document

I'm struggling with a problem involving adding a value from a textbox in the dialog box to my HTML body. <div id="dialog-form"> <form> <label for="name">Name</label> <input type="text" name="name" id="txt2 codein ...

jqueryhtml

When resizing the browser, the divs stack neatly without overlapping

We need to ensure that the 4 divs stack on top of each other without overlapping! The header should have the same width as the footer, 100% The menu should stack with the header and footer The content should be centered on the page and stack with the oth ...

htmlcssoverlapping

javascript create smooth transitions when navigating between different pages

As a newcomer to JS, I am currently working on creating a website with an introduction animation. My goal is to have this animation displayed on a separate page and once it reaches the end, automatically redirect to the next webpage. <body onload="setT ...

javascriptjqueryhtmlcss

Selection box containing options retrieved from MySQL database dates

I am trying to populate an HTML dropdown with data from a MySQL database. I ran the query in PHPMyAdmin and it worked fine, returning one record. The entire website is connected to this MYSQL details. Here is my code:  <?php mysql_connect("loc ...

phphtmlsql

Count in JavaScript that picks up where it left off

I'm working on setting up a countdown timer that runs for 24 hours, showing the days, hours, minutes, and seconds. The challenge I'm facing is how to save the progress of the countdown. Essentially, I want it to resume from where it left off for ...

javascripthtmlcookiescountercountdown

Button click initiates DataTables search rather than manually entering text in the input field

I am exploring the option of relocating the search function from an input to a button for a table that has been modified using DataTables. Currently, I have a customized input that triggers this function: <script> $(document).ready(function() { ...

javascriptjqueryhtmldatatables

The navigation bar expands in height as the media width changes

I have a rather straightforward navbar: <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header pull-left"> @Html.ActionLink("Contact ...

htmlcsstwitter-bootstrap

Verify the grid of buttons in my code for the background color

My goal is to make sure that when all the buttons are black, the h2 text in the 'lightsoff' div is displayed. If any buttons are not black, the text will remain hidden. I plan to achieve this by creating a new function that checks the background ...

javascripthtml

Cannot close the Bootstrap dropdown after selecting an option

I am encountering an issue with a dropdown list that has a select feature using Bootstrap 3.4.1. The problem is that the dropdown remains open after selection and does not close unless I click outside of the list. Here is the HTML code: <div id="c ...

javascriptcss

The issue of changing the body font size in MUI v5 with React Styleguidist, ScopedCSSBaseline, and createTheme style overrides remains unresolved

Recently, I successfully migrated two MUI-powered UIs from MUI v4 to v5. In the process, I had to override their body fontSize according to the MUI migration guide to maintain the v4 design default of Typography body2 font size. This adjustment has worked ...

cssreactjsmaterial-uithemes

Implementing dynamic CSS switching for right-to-left (RTL) support in a multilingual Next.js application

As I work on my multilanguage application with Next.js, I'm encountering a challenge in dynamically importing the RTL CSS file for Arabic language support. My aim is to seamlessly switch between RTL and LTR layouts based on the selected language. M ...

cssnext.jsi18nextdynamic-import

Issues arise when trying to manage HTML received as a response from a server in plain text

I have a scenario where I am dynamically generating an HTML table on the server side using Java and then sending it to the client as JSON data. The response looks something like this: <table class="table"></table><thead class="thead-dark"&g ...

javascriptjqueryhtml

WebStorm by JetBrains came across an unexpected token while running Jest

Encountering difficulties running a simple project in WebStorm IDE. Upon attempting to run, the following error is displayed: Test suite failed to run Jest encountered an unexpected token This typically suggests an issue with file import that Jes ...

htmlnode.jsnpmfrontendwebstorm

I require limitless onclick functionality, but unfortunately, transitions are not functioning as expected

I'm currently working on creating a dynamic photo gallery, but I've encountered a couple of issues that need to be addressed... The "onclick" function in my JavaScript only allows for a single click, whereas I need it to be able to handle mul ...

javascriptcssonclickgallerycss-transitions

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black): My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same ef ...

javascriptjqueryhtmlcss

What is the best way to interact with a hidden link using Selenium webdriver?

Whenever I try to access a specific link on a webpage, it is only accessible after selecting a filter button element. Filter Button Desired Link I attempted to locate the element using CSS Selector due to the presence of "include-out-of-stock" in the link ...

pythonhtmlseleniumselenium-webdriver

Grid system that adapts without distortion

My goal is to create a grid that maximizes the number of elements in its width without stretching them to fit the entire window. That's why I'm utilizing CSS grid with the auto-fill property, which is almost achieving the desired outcome. I want ...

htmlcssgrid

What is the best way to show an image within a div using HTML and fetching data from an API response?

I am attempting to showcase an image within a div using HTML. I utilized fetch to retrieve the JSON data from the following API: . The response contains JSON data with the image URL labeled "primaryImage". While I can display it as text, I am encounterin ...

javascripthtmlcssjson

Interactive pop-up windows in Bootstrap

I encountered an issue with bootstrap modal forms where the form displays correctly after clicking on the button, but the area in which the form is displayed gets blocked! It's difficult to explain, but you can see the problem by visiting this link. ...

javascriptjqueryhtmltwitter-bootstrap