What is the solution for aligning <grid> containers to match the height of the tallest container in the row?

Question

What is the solution for aligning <grid> containers to match the height of the tallest container in the row?

I've been grappling with a CSS issue. I'm attempting to ensure that my accordion containers within my layout all have the same height as the tallest item on their respective rows. This would create a sleek and responsive layout where all items are uniform in height and width:

Currently, however, the heights of my accordions are inconsistent.

Here's a quick visual representation of my dilemma:

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

Each accordion consists of an icon, title text, and subtitle text.

The current problems include:

Varied character lengths for titles and subtitles result in some containers being larger or smaller than others. The icons exacerbate this issue by further pushing the text around.

I have created a demo showcasing my problem in the sandbox below: https://codesandbox.io/s/fancy-leaf-nz9x0?file=/src/index.js

Ideally, the icon, text, and subtitle elements would align horizontally within each accordion item.

Any suggestions on how to address this using CSS?

html css material-ui

Answer 1

Answer №1

If you're looking to ensure uniform height for all elements, the following code snippet could be of help; it caters to scenarios where you want either all elements to share the same height or only elements within a row to have equal heights.

.container{
    display: grid;
    grid-template-columns: 1fr 1fr; // two columns of equal width

    // Select one of the options below 
    grid-auto-rows: 1fr; // ensures all elements match the tallest element's height
    grid-template-rows: 1fr; // sets each row's elements to an equal height (varies by row)

    gap: 1rem; // space between each element
}

Answer 2

If you're looking to ensure uniform height for all elements, the following code snippet could be of help; it caters to scenarios where you want either all elements to share the same height or only elements within a row to have equal heights.

.container{
    display: grid;
    grid-template-columns: 1fr 1fr; // two columns of equal width

    // Select one of the options below 
    grid-auto-rows: 1fr; // ensures all elements match the tallest element's height
    grid-template-rows: 1fr; // sets each row's elements to an equal height (varies by row)

    gap: 1rem; // space between each element
}

What is the solution for aligning <grid> containers to match the height of the tallest container in the row?

Answer №1

Similar questions

Desiring the standard back button feature of a browser to work seamlessly when loading pages via ajax requests

Creating an invoice or money receipt using HTML is a straightforward process that involves using specific code and

Javascript enables the magnetization of cursor movements

Grab images from clipboard, encountering blob Error

Exploring jQuery: Choosing all li elements starting from a specific index to the end

Steps for positioning an element to the left and center of a div

If the element is checked and equal to a specific value, take action

Having trouble getting an alert to display within a function call in Reactjs

Create an HTML button with dual functionality

Refreshing PHP Script

Modify the click function from <tr> to <td> tag

Twitter Bootstrap 3 Carousel now showcasing a pair of images simultaneously instead of three

Utilizing Bootstrap 3: Mastering the Implementation of .col Classes with .form-control Classes

Solving the problem of communication between sibling components in React

The HTML form input allows users to input multiple answers for each field

Tips for eliminating flicker upon the initial loading of a webpage caused by dynamic changes in CSS styles through JavaScript

Encountering issue with Django locating static file (1.5) showing ERROR 404 code 1649

Tips for choosing the ancestor's ancestor in CSS

Embedding PHP code within inline styles

Which is better for SEO: using H tags or image alt text?