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.

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

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.

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

.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

How to use Python and JavaScript to make a WebElement visible in Selenium

I am currently facing an issue with uploading a PNG file using Selenium. The input element necessary for the upload process is visible to the user but not to Selenium. Following the suggestions in the Selenium FAQ, I tried using JavaScriptExecutor as shown ...

javascriptpythoncssseleniumselenium-webdriver

What is the method of generating an HTML tag solely using CSS?

Looking to style HTML tags without altering them in any way? Consider this example: <div id="Code_G" class="editor-group"> editor-group<br /> <div id="Code_L" class="editor-label "> editor-label </div> < ...

htmlcss

The input and label are not experiencing any overflow

I've been following a tutorial to create an animation on an input and label. I successfully did it once today in school, but for some reason, it's not working now. My objective is to have the label inside the "input" field, with the input taking ...

htmlcss

At what point does a box create an inline formatting context?

According to my research, I came across a situation where a block formatting context is generated as explained in MDN:Block formatting context. I am curious about the scenarios that lead to the establishment of an inline formatting context within a box. ...

css

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

javascriptjqueryhtmldjangopython-3.x

Tips for adjusting the height of a selection box in jQuery Mobile

I am trying to make the select box height the same as the label (模板分類:). <select id="TamplateClass" style="height:1.5em">...</select> you can use CSS #TamplateClass{height:1.5em;} However, no matter what I try, the results are all th ...

cssjquery-mobile

Whenever I create a new JavaScript application, the CSS files do not seem to reflect the most recent changes

My Next.js App is running smoothly on my client when I do npm run build and test it with node server js. However, the issue arises when I move the app to a production server. After executing npm run build on the server, everything seems to work fine except ...

cssnode.jsnext.js

Enhancing Images with Dynamic Captions Using JQuery

I have created a code to add image captions to different div blocks, and it works as intended. However, I am looking for ways to optimize the code and make it shorter. If you have any advice on how to improve it, please let me know! Thank you in advance. ...

jqueryhtmlcss

Having trouble with images not showing up on React applications built with webpack?

Hey there! I decided not to use the create react app command and instead built everything from scratch. Below is my webpack configuration: const path = require("path"); module.exports = { mode: "development", entry: "./index.js", output: { pa ...

javascripthtmlcssreactjs

What is the best method for modifying an XML document without altering its associated XSL stylesheet?

I am working with XML data retrieved from a URL: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="/style.xsl"?> ....etc... To display the data in HTML format, I added the second line referencing the style.xsl file ...

cssxmlxslt

Is it possible to scroll the grid horizontally?

I have a grid that scrolls vertically, with columns adjusting their width automatically. .grid { display: grid; overflow-y: auto; grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr)); } Now, I'm attempting to create a horizon ...

cssflexboxcss-grid

The problem of Rails redirect_to not working with anchor and will_paginate gem

In my posts controller, I have implemented a feature where upon updating a post, it redirects to the specific post using an anchor tag. The challenge arises when dealing with pagination through the will_paginate gem. I have set up pagination to display fou ...

htmlruby-on-railswill-paginate

Ways to conclude a running function

This script has been created by me: $(document).ready(function(){ $("div#tabs a").hover(function(){ rod = this.id $('div.tabber').hide(); $('#tabber_' + rod).fadeIn(); $("div#tabs a").removeClass("ta ...

jqueryhtmlmenutabsfadein

The margin-right and margin-left properties function differently when it comes to dealing with overflow of floated divs

<body> <div class="content"> <div class="content-sidebar"> content-sidebar </div> <div class="content-main"> content-main </div> ...

csscss-floatoverflow

In search of a CSS selector that can target elements based on specific text contained within them

Query: <div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div> <div class="btn btn-second-in-pair-not-desired btn-tall">Basic Searc ...

htmlcssseleniumselenium-webdriver

Displaying a single row of a PHP array in bold formatting

I have a MySQL query result showing user information and subjects they have chosen. I want to highlight one specific row by making it bold using PHP while keeping the rest as regular text. How can I achieve this? $resultSet = $db->query ("...my q ...

phphtmlarrays

issues with the styling and scripts within the jsp document

During my project work, I encountered an issue with the front end as shown in the image below. Upon loading the project, all styles and scripts disappear completely. How can I resolve this issue promptly? I attempted to update the jQuery version by replac ...

jqueryhtmlcssjsp

Unable to locate CSS file in subfolder

Comparing two scenarios: Scenario 1 is problem-free, but issues persist in scenario 2. Review the details below: Scenario 1: MasterPages: Main\MasterPages.master Css : Main\Theme\CSS\ Javascript : Main\Theme\Javascrip ...

jqueryasp.netcssmaster-pages

Is there a way to wrap the "#+ATTR_HTML" tags around the preview output of the "#+RESULTS" Source Block in Org-mode for Emacs?

Using plantuml in org works fine for me. However, I am looking to enhance it by automatically inserting some HTML tags just before the #+RESULTS output tag. This will help achieve a more visually appealing HTML output effect. Here's an example of my ...

htmloutputorg-modeattrplantuml

Should we consider using extra url query parameters as a legitimate method to avoid caching or enforce the updating of css/js files?

Is it acceptable to include extra URL query parameters in order to avoid caching or enforce the updating of CSS/JS files? /style.css?v=1 Or would it be preferable to rename the file/directory instead? /style.1.css I've heard that this could potent ...

javascripthtmlcsscachingserver