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:

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

Utilizing Javascript to Extract Data from Twitter Json Files

What makes text-decoration a crucial element of the foreground design?

Troubleshooting TypeScript errors in a personalized Material UI 5 theme

"Adjusting the position of the Icon in the Material UI ItemList to make it closer

Utilizing ReactJS to implement real-time form validation using Material UI

Problem encountered with HTML table formatting

The directory for foundation images cannot be found

Utilizing jQuery to assign a value to a SPAN tag

What is the process for selecting the default option in a drop-down menu?

A guide on implementing multiple ternary operators in a Vue.js template

Ways to eliminate HTML tags from the output while preserving the formatting

Experience a glint in the React Suspense with React Router - Struggling with CSS properties post utilizing Suspense and Lazy

Checking the content of a textfield in React Material UI based on the user input

Error 404 occurs when images are not able to load when stored in a different directory

Learn how to organize a div element containing select options using categories such as gender and shoe size, similar to the filtering

Creating a JavaScript object and retrieving the values of numerous input fields with identical classes

Whenever I click the left mouse button, the website crashes

How does the pagination feature in MUI Table handle navigating to the previous page?

"Troubleshooting a CSS Bug on a PHP Dynamic Web

Ensure that the HTML link is valid and authenticated using SESSIONS