Matching the heights of child elements in different block elements using CSS (flex/grid)

Hey there! I need some help with a markup issue. I want to replicate the layout shown in this picture. The challenge is ensuring that the grey line between the upper and lower sections of cards on the same row are aligned perfectly. In the image, you can see that the grey line shifts due to text overflow. We're allowed to utilize both flexbox and grid layouts for this task.

<div class="cat-cards">
        <div class="cat-card">
            <img src="">
            <div class="short-description">
                short
            </div>
            <div class="long-description">
                long
            </div>
        </div>
        <div class="cat-card"></div>
        <div class="cat-card"></div>
    </div>

I have an initial concept as displayed above, but feel free to suggest any alternatives using grid and flex properties.

.cat-cards
{
    display: flex;
}

.cat-card
{
    display: grid;
    grid-template-areas: 'image' 'short'
                     'long' 'long';
   }

.cat-card img
{
    grid-area: image;
}

.cat-card .short-description
{
    grid-area: short;
}

.cat-card .long-description
{
    grid-area: long;
}

Answer №1

If I understand your request correctly, you are looking to have all rows expand equally when the height of one row increases.

EXAMPLE

.Grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr
}

.cat-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

.cat-card img {  
  max-width: 200px;
}

.long-description{
  grid-column: 1 / 3;
  border-top:1px solid #ddd;
}
<div class="Grid">

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class=&"_description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

</div>

Answer №2

It's important to always include the display:flex; statement in your parent container to ensure all children elements receive this style as well. Try using the inline flex parameter on your child elements within a wrapper with something like flex:50% applied to both sides.

For additional resources, feel free to check out the links below. I will also make any necessary edits to the code once I have finished working on it.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

The background image positioned in the center may experience cropping in HTML

I am currently facing an issue with aligning a background image horizontally in a specific scenario: The background image is large and needs to be centered horizontally The page has a minimum width requirement of 960px which may result in a scrollbar on ...

What could be causing the dropdown menu to not display below its container when the overflow:hidden CSS property is applied to the container element

One issue I'm facing is that the dropdown submenu of my navigation menu does not extend beyond its container element when displayed. My code includes main menu items (HOME, ABOUT, SERVICES, PRODUCTS, and CONTACT) along with submenu items (A, B, C, D, ...

Header with a dropdown select option

In the process of developing a monitoring system, I am in need of a feature that allows users to select varying numbers of days. Here is the desired style: Previous [Dropdown Selection] Days https://i.sstatic.net/ysk6X.png Ideally, I do not want any bor ...

The background image causes the scrollbar to vanish

As a beginner, I am in the process of creating a web page that features a consistent background image. However, I have encountered an issue where the scroll bar does not appear on a specific page called "family details" due to the background image. I atte ...

What is the best way to modify CSS animation property without causing any disruptions?

Could you help me with modifying this CSS animation? I want to adjust the animation-iteration-count to 1 only when a certain property, status, is added to the element. Currently, the animation is not working as expected. For example: setTimeout(() => ...

"Problem with binding a dropdownlist to an object causing the selected object not to return

I have successfully bound an object to a dropdownlist using Knockout 2.2.1. The binding correctly displays the items in the list, but I am facing difficulties retrieving the selected OBJECT. To illustrate this issue, I have created a JSFiddle: http://jsfid ...

Chrome is experiencing a problem with anchor tags that have an href attribute set to a "blob:" URL and using a target of "_blank"

My current project involves developing a website feature that allows users to download a PDF version of a page. To achieve this, the generated HTML is rendered into a PDF on the server, which is then returned as a Base64-encoded PDF. This data is converted ...

Unable to update the color of material icon using document.getElementById(item) method

if (document.getElementById(item).style.color == "grey") { document.getElementById(item).style.color = "red"; } <i class="material-icons" [ngStyle]="post.isLiked != null ? {'color': 'red'}: {'color': 'grey'}" id ...

What causes the flex div to inherit the full width of its parent div?

I'm having trouble understanding why a flex div always occupies 100% width of its parent element. Consider the code snippet below: #wrapper { width: 100%; height: 100px; background: green; } #flex { color: white; display: flex; ...

Even when autocomplete is disabled, Firefox continue to cache hidden input fields

I'm encountering an issue with a form that has the autocomplete attribute set to off. Within this form, there is a hidden input element (created using ASP.NET MVC's Html.HiddenFor() method): <input type="hidden" value="0" name="Status" id="S ...

What is the reason the child component is not being displayed?

The code within the APP.js component looks like this: import React from "react"; import Exam from "./exam.js"; export default function App() { return ( <Exam> <h1>hashemi</h1> </Exam> ); } Similarly, the ...

Despite utilizing overflow and wrap properties, HTML lists still fail to display horizontally

Make sure to copy the code and run the HTML file first. For organization, place the JavaScript file in the scripts folder and the CSS file in the styles folder. The issue at hand is that the li elements are not displaying horizontally as intended; they n ...

The image is exceeding the boundaries of its parent element, even though a height has been specified

I need assistance with aligning an image inside a div that should take the height of its parent div, specifically the .hero class. Despite setting the image's height to 100%, it still extends beyond the parent div and doesn't adhere to the specif ...

Node.js script encounters errors fetching static files

My HTML index.html file has multiple containers, and I have included the bootstrap and font awesome folders in the <head> section like this: <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap/css/bootstra ...

Creating a triangle with SVG polygon: A step-by-step guide

I'm attempting to create a bottom triangle using SVG polygons, similar to the image below: https://i.stack.imgur.com/571FM.png Here is what I have tried so far: <svg xmlns="http://www.w3.org/2000/svg" height="150px" width="100%" viewBox="0 0 ...

What causes the entire page to disappear when the screen is adjusted to mobile width?

I'm facing an issue with my ReactJS screen. Everything works perfectly until I resize the screen to mobile width (sm of Material UI) and then everything turns into a WhiteScreen. I've been trying to debug this but can't seem to find the root ...

Knitting: exporting to HTML file while retaining formatting

Recently discovered the amazing knitr library in R, which looks great when viewed in the viewer. But unfortunately, the style gets lost when saved to an html file. Code library(knitr) library(kableExtra) some.table <- data.frame ( x = rep(1 ...

Removing all table rows except one in Jquery

I currently have this code in my view: <script> $(document).ready(function() { $("#add_instruction").click(function(){ $("#instructions").append("<tr><td></td><td><input type='text' name='rec ...

Enhancing NG Style in Angular 6 using a custom function

Today, my curiosity lies in the NG Style with Angular 6. Specifically, I am seeking guidance on how to dynamically update [ngStyle] when utilizing a function to determine the value. To better illustrate my query, let me present a simplified scenario: I ha ...

Is it possible to adjust the height of sibling divs within a sequence to match the tallest div?

Do you have a set of inline div containers with hardcoded widths but varying content heights? Is there a way to ensure that all divs maintain the same height without risking content overflowing from its parent container? I've experimented with inher ...