Styling the CSS to give each grid element a unique height

I am working on a grid layout with three columns where the height adjusts to accommodate all text content.

.main .contentWrapper {
    height:60%;
    margin-top:5%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:10px;
    /*grid-template-rows: auto;*/
    height:auto;
}

.main .contentWrapper .box .boxText {
    padding:15px;
    height:25%;
    text-align:center;
    margin:0;
}

img {
    object-fit:cover;
    width:100%;
    height:400px;
    margin:0;
}

I am looking for a solution to make each box resize based on its own text length, instead of all boxes having the same height. Currently, the first two columns adjust their height based on the tallest column which is in the third column.

htmlcssalignmentcss-grid

Answer №1

The default value of the align-items property for a grid container is stretch, meaning each grid item will stretch to the height of the grid row (or to the largest item in the row if height is not set using grid-template-rows).

To modify this behavior, you can simply add align-items: flex-start to the grid container (.contentWrapper) - as demonstrated below:

body {
  background: #ddd;
}

.contentWrapper {
  height: 60%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-template-rows: auto;*/
  height: auto;
  align-items: flex-start; /* ADDED */
}

.contentWrapper .box .boxText {
  padding: 15px;
  height: 25%;
  text-align: center;
  margin: 0;
}

.box {
  background: #fff;
}

img {
  object-fit: cover;
  width: 100%;
  height: 400px;
  margin: 0;
}
<div class="contentWrapper">
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here</div>
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here Some text here Some text here </div>
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some lengthy text that may exceed the box size when stretched vertically.</div>
  </div>
</div>

Answer №2

To resolve this issue, I included the CSS rule margin-bottom: auto for each element with the class .contentWrapper .box. By doing so, the text aligned perfectly with the image and ensured that each cell adjusted to its content.

.main .contentWrapper {
  height: 60%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-template-rows: auto;*/
  height: auto;
}

.main .contentWrapper .box {
  background-color: #eee;
  margin-bottom: auto;
}

.main .contentWrapper .box .boxText {
  padding: 15px;
  height: 25%;
  text-align: center;
  margin: 0;
}

img {
  object-fit: cover;
  width: 100%;
  height: 400px;
  margin: 0;
}
<div class="main">
  <div class="contentWrapper">
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text text</div>
    </div>
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text texttext text text texttext text text texttext text text texttext text text text</div>
    </div>
    <div class="box">
      <img src="http://placekitten.com/200/200" alt="">
      <div class="boxText">text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text</div>
    </div>
  </div>
</div>

Link to jsFiddle

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

React Tabulator - custom header filter for select column - hide 'X' option

Is it possible to remove the 'x' option on header filters in react tabulator columns? The issue arises when users click the 'X' to clear a filter, as expected. However, if they then try to click on the same filter for another list item ...

cssreactjstabulator

The content of the served HTML Table remains static and requires a server restart for any updates to

Having been encountering this issue for quite some time, I have searched extensively for a solution but to no avail. Therefore, I am taking matters into my own hands and posing the question myself. The dilemma is as follows: https://i.stack.imgur.com/UZrQ ...

javascripthtmlnode.jsmongodbexpress

What is the secret to keeping a hover effect active?

As I hover over the buttons in my stack, a text box appears on the right side. The intention is for this text box to act as a scroll box, but it disappears when I move my mouse to scroll because it needs to be continuously hovered upon to stay active. To ...

htmlcsshover

On a Samsung tablet with Moodle, the body background image is set to display at the top

Encountered an issue with Sambungs tables. I have a background image set on the body. Here is how the CSS looks: html, body{ background: url('img/background.jpg') no-repeat; background-position: top; // I also tried cover, fixed, etc } The ...

htmlcssmoodle

Is the CSS Transition Solely Active for the Introductory Animation?

I'm currently looking to enhance the smoothness of div expansion and contraction on hover using CSS transitions. However, I have noticed that the Transition property only seems to affect the entry animation (i.e., when the mouse hovers and the div exp ...

javascripthtmlcssreactjsweb

Transitioning between pages causes a delay in loading the background

Today as I was working on my CSS, I encountered some issues. I utilized Bootstrap and Darkstrap for designing. In Darkstrap, the style for the body is body { color: #c6c6c6; background-color: #2f2f2f; } Meanwhile, in my own CSS: body { ...

httpcsstwitter-bootstrap

Is the "footer" div automatically nested within the "main" div if they are not nested in the code?

Within my code structure, I currently have the following: <html> <head> ... </head> <body> <div id="body"> <div id="main"> ... </div> <div id="foot ...

htmlcss

How can I use Angular to toggle a submenu based on a data-target attribute when clicked?

Struggling to implement a functionality using ng-click to retrieve the data-target attribute of a clicked angular material md-button, in order to display the submenu when a topic is clicked on the sidenav. The navigation structure consists of md-list with ...

javascriptjqueryhtmlangularjs

How can I ensure that the images span the entire width of the page in ResponsiveSlides?

I am trying to make my images occupy the entire width of the page just like in this example: However, I have not been able to find a property for this. I'm new to using Jquery but I have a good understanding of Javascript Can someone please help me ...

javascriptjqueryhtmlcssresponsive-slides

Set up dynamic restrictions for the length of an HTML paragraph with PHP

I am attempting to dynamically set the limit of content retrieved from a database in PHP. Specifically, I need to trim the input from the database before assigning it to an HTML paragraph. I attempted to use the substr function but was unsuccessful. Can y ...

phphtml

Unable to find component: "wrestler-choice-box". If this is a built-in custom element, please ensure it is not included in component resolution

In my attempt to achieve a specific goal, I have an array of data that I want to incorporate into my HTML document along with a Vue component containing a template. My intention is to utilize list rendering so that the names and images from this array bind ...

javascripthtmlvue.jsvue-componentvuejs3

The AngularJS $HTTP loop counter fails to update

When working with an HTTP service and binding JSON data to HTML, I implemented the following code: This function uses a 2-second timer to automatically fetch data whenever there is a change in the backend. function sampleDevices ...

javascripthtmlangularjs

Should the element be scrolled beyond a fixed-positioned element

Is there a way to determine if an element is scrolled behind another element that is fixed at the top? I am looking to trigger some javascript when an element is positioned below a fixed element and every height or scrollTop thereafter. I am attempting t ...

javascriptjquerycsscss-positionsticky

What is the best way to prevent table cell borders from encroaching on the padding area of the cell?

When dealing with table cell elements that have borders, it's common for them to not respect the vertical height of the cell containing them. Sometimes a child element's borders may overlap the padding or border of its containing cell. To prevent ...

htmlcss

Is there a specific code repository available that can verify and transform blog comments into XHTML strict format?

I'm currently developing a PHP website that allows users to make comments similar to a blog, and I am specifically interested in restricting the use of certain HTML tags. Is there any existing library that can process user comments and output valid XH ...

phpjavascripthtmlxhtmlcomments

Enhance your website navigation with Bootstrap Scrolling Nav: maintain consistent section heights and highlight the active

Can you help me with an issue I'm having when clicking on the <a> link in the navigation? The anchor point seems to be misplaced as the section headline (<h2>) is not visible. Is there a way to highlight the <a> links, perhaps by add ...

htmlcsstwitter-bootstrap

What is the best way to ensure that two divs have aligned bottom edges?

I have a set of div containers positioned in different columns within a grid layout. I am looking for a way to identify the containers where the bottom edge is less than 50px higher than any other container, and adjust their heights so they align perfectly ...

jqueryhtmlcssgridalignment

Tips on saving this information in a MySQL database

I'm currently developing a php script that collects and saves links in mysql. However, I've encountered an issue where the script sometimes captures multiple links for the same download, as shown below: http://www.fileserve.com/file/XXXXXX http: ...

phpmysqlhtml

Unable to delete borders within the container

Is there a way to eliminate the borders within this container? Visit this link for reference. I've tried using firebug but I can't seem to locate it... Appreciate any assistance you can provide. Thank you! ...

csswordpressborder

What sets apart auto, 0, and no z-index values?

Can you explain the distinctions between the following: z-index: auto z-index: 0 the absence of z-index In all scenarios mentioned, we have a container div that contains two inner divs, named div1 and div2, with respective z-index values of 9 and 10. T ...

htmlcssz-index