Consistent height for h2 containers across all CSS grid columns

Is there a way to ensure all h2 containers have the same height, both with JavaScript and without it? The h2 titles are dynamic and can vary in length, but I want to maximize the space for all containers.

img {
  max-width: 100%;
  height: auto;
}

.grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-column-gap: 2rem;
}
<div class="container">
  <div class="grid">
    <div class="items">
      <div class="item-title">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
      </div>
      <img src="https://via.placeholder.com/350x150" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="items">
      <div class="item-title">
        <h2>The quick brown fox jumps over the lazy dog.</h2>
      </div>
      <img src="https://via.placeholder.com/1400x600" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="items">
      <div class="item-title">
        <h2>The color is Green</h2>
      </div>
      <img src="https://via.placeholder.com/783x512" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="items">
      <div class="item-title">
        <h2>The quick brown fox jumps over the lazy dog.</h2>
      </div>
      <img src="https://via.placeholder.com/450x273" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

Check out the CodePen Demo: https://codepen.io/rejaulkarim/pen/xaXBLP

javascripthtmlcssgrid

Answer №1

To enhance the appearance of your h2 or item-title, consider adding some custom CSS properties.


h2 {
 line-height: 1.2;
 font-size: 25px;
 height: 90px;
}

If you have the maximum number available, you can easily calculate the appropriate height.


height = maximum number * line height * font-size

For instance, in this scenario: 90 = 25 * 1.2 * 3

Answer №2

When working on your CSS file or within a style tag, include the following code snippet. It is important to mention the font-size value you desire.

h2
{
font-size:20px;
width: auto;
}

This should meet your requirements perfectly, Thank you.

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

Eliminating the standard padding on a Vuetify v-app-bar

When using Vuetify's v-app-bar, there are default css classes named v-toolbar__content and v-toolbar__extension that apply padding of 16px on the x-axis and 4px on the y-axis, which I aim to eliminate. I attempted to override these classes in my CSS ...

cssvue.jsvuetify.jsappbar

Using a render target causes certain elements of my visual graphics to become hidden

Hey there, I've been experimenting with render targets lately and encountered some issues. I've put together a simplified example below: init = function() { // RENDERER canvas = document.getElementById("mycanvas"); renderer = new THREE ...

javascriptthree.js

I'm curious, which effect or plugin is being used here?

Do you know the name of this particular parallax effect or the plugin used for it? I'm also interested in finding more examples with a similar type of effect, so if you have any tutorials on how to achieve it, that would be greatly appreciated. ...

jqueryhtmlcss

Conceal an item if the span element encompasses a div with a specific class

I am struggling with a problem where I need to hide an "i" element only if a "span" contains a "div" element. The content inside the "span" is loaded via AJAX and rendered as HTML, so it may contain the "div class=difference" or not. The code snippet in q ...

javascriptjqueryhtmlajaxangularjs

I have noticed that the baseline of a Span element has shifted after updating my Chrome browser to a version that begins with

Once I updated to chrome Version 108.0.5359.94 (Official Build) (64-bit) from 107.0.5304.87 (Official Build) (64-bit), the behavior of the span element changed drastically. It shifted its baseline when multiple spans were stacked on top of each other. Exp ...

javascripthtmlcssgoogle-chrome

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...

htmlcsstwitter-bootstrap-3

An interactive 3D model emerges against a sleek ebony backdrop on my online platform

I stumbled upon a three.js 3D object featuring a unique touch - a 404 text with a floating orb replacing the zero. Upon importing its code, it rendered successfully, albeit against a black background. Despite my efforts to tweak values and apply background ...

javascriptthree.js

Mobile device experiences shader malfunction

On my laptop, this shader works perfectly fine. However, I'm facing issues on mobile devices and suspect that it might be related to precision settings. Here is the error message I'm encountering: THREE.WebGLProgram: shader error - 0 35715 fals ...

javascriptthree.jsshaderwebgl

Check to see if there is a value present in a JavaScript array

I am trying to validate the content of the data array in the code below. My goal is to ensure that when a user enters a packageid (a variable in the code), and if that packageid does not exist, the "else" statement in the conditional should be triggered. ...

javascriptjqueryif-statement

Achieve full coverage of a table cell with jQuery by making a div span its entire

Check out this code snippet on jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/ To address the limitation of css height: 100% only working if the element's parent has an explicitly defined height, this jQuery script adjusts the cell height. Is there ...

jqueryhtmlcssbackground-color

Exploring the issue of varying site header widths in WordPress: The mystery behind my unfinished author page

Why is there a difference in site header width between the author page and other pages? It seems incomplete on the author page while it's complete on other pages. What am I missing? <header id="site-header" role="banner&q ...

phphtmlcsswordpress

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

htmlcss

The issue of CSS not functioning properly across various page sizes

I have created my toolbar: <header className='toolbar'> <nav className='toolbar_navigation'> ///hamburger: <SideDrawer drawerClicked = {props.drawerClicked} /> ///LOGO ...

javascripthtmlcssreactjs

Discovering over ten outcomes from the Google Search API

I've been attempting to retrieve more than 10 results from Google using the search API. I understand that the API only provides 10 results per call, so you need to make multiple calls to accumulate a larger number of results. However, I'm struggl ...

phphtmlsearch-enginegoogle-search-api

Utilizing CSS3 Patterns: A Guide

Is there a way to utilize these patterns effectively? I attempted to implement them, but it was not successful. http://jsfiddle.net/ujmWH/ I also tried on tinkerbin with the same outcome. Appreciate any advice or guidance. ...

htmlcss

Utilizing the GROUP BY clause within an INNER JOIN operation, and presenting the results in an HTML dropdown menu

My database includes the following tables: Workers (id, total_pay, date_of_pay, projects_id) Payments (id, payment, date, projects_id) building_materials(id, pay_of_materials, date, projects_id) additional(id, add_pay, date, projects_id) All tables have p ...

phphtmlmysql

The Spotify Whitelisted URI may show an error message: { "error": "invalid_grant", "error_description": "Redirect URI is invalid" }

Although there are similar questions out there, I'm facing a different issue. I am trying to obtain an access token from Spotify API, but all I keep getting is the dreaded "invalid redirect uri" error. Below is my API call: const request = require(& ...

javascriptexpressspotify

Leveraging React Hooks' useEffect to trigger a prop callback function defined with useCallback

Currently, I am working on developing a versatile infinite scrolling feature using React Hooks along with the ResearchGate React Intersection Observer. The main concept revolves around a parent passing down a mapped JSX array of data and a callback functio ...

javascriptreactjsreact-hooksrace-conditionuse-effect

Changing the value of one particular key within an object during a reduce operation will impact all other keys within the object as well

I'm completely lost here. It seems like there's a reference issue causing all data properties to be overwritten with the value of the last row. I need help figuring out how to iterate over a list of objects, using specific keys to assign data to ...

javascriptnode.js

Error message: The function `useSession` is not defined within the Next.js

I'm currently working on a next.js project with next-auth, where I have successfully implemented the login functionality. However, I'm facing an issue when trying to use the session to fetch user data on a specific page. Whenever I attempt to use ...

javascriptreactjstypescriptnext.jsnext-auth