Strategies for implementing a minimum height for grid-template-column containers

Here's an issue I'm facing: when the first container has content, the other two containers without content end up being the same height as the first one:

Check out this JSFiddle link for reference

.grid {
  padding: 5px;
  background: gray;
  display: grid;
  grid-template-columns: auto auto auto;
}
.todo-column {
  min-height: 150px;
  margin: 0 auto;
  width: 90%;
  background: cyan;
  text-align: center;
 }
  
.todo-title {
  color: white;
  font-size: 175%;
  padding: 5px;
  border-bottom: 5px dotted black;
 }
<div class="grid">
  <div class="todo-column">
    <h1 class="todo-title">Aloittamatta</h1>
    <h1>foo</h1>
    ...
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Työn alla</h1>
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Valmis</h1>
  </div>
</div>

How do I ensure that all three containers have the same default height, but adjust dynamically when one of them has content while keeping the others at a minimum height?

htmlcsscss-grid

Answer №1

To enhance the layout, include align-items: self-start; in the ".grid" class and assign a value to min-height property in the ".todo-column" class

.grid {
  padding: 5px;
  background: gray;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items:self-start;
}
.todo-column {
  min-height: 150px;
  margin: 0 auto;
  width: 90%;
  background: cyan;
  text-align: center;
 }
  
.todo-title {
  color: white;
  font-size: 175%;
  padding: 5px;
  border-bottom: 5px dotted black;
  min-height: 100px;
 }
<div class="grid">
  <div class="todo-column">
    <h1 class="todo-title">Aloittamatta</h1>
              <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Työn alla</h1>
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Valmis</h1>
  </div>
</div>

Answer №2

.grid {
  padding: 5px;
  background: gray;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: start;
}
.todo-column {
  min-height: 150px;
  margin: 0 auto;
  width: 90%;
  background: cyan;
  text-align: center;
 }
  
.todo-title {
  color: white;
  font-size: 175%;
  padding: 5px;
  border-bottom: 5px dotted black;
 }
<div class="grid">
  <div class="todo-column">
    <h1 class="todo-title">Aloittamatta</h1>
              <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
          <h1>foo</h1>
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Työn alla</h1>
  </div>
  <div class="todo-column">
    <h1 class="todo-title">Valmis</h1>
  </div>
</div>

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

The issue with HTML/CSS is that it does not display video backgrounds correctly on mobile devices

On mobile, I have a code that displays a video with only a play button visible without the video itself. Once I click on play, the video starts playing as expected, but I would like to have something behind it. Here is how it currently appears: <div ...

htmlcsstailwind-css

Manipulate DIV elements with jQuery by selecting them based on their class names and then

Is there a way to use jQuery to eliminate all DIVs on a webpage while preserving their content that have the following specific pattern? <div class="ExternalClass85AC900AB26A481DBDC8ADAE7A02F039">....</div> Please note that these DIVs adhere ...

jqueryhtml

Can a JavaScript function be used with images to operate across multiple elements?

How can I make a function work on multiple elements? let image = document.getElementById("opacityLink"); image.onmouseover = function() { image.style = "opacity:0.9"; }; image.onmouseout = function() { image.style = "opacity:1"; }; <div class=" ...

javascripthtmlcssimage

PHP Warning: Attempting to access a key that does not exist in the array

Upon checking the error_log, I came across this error message. Searching on Google led me to a suggestion of adding the "isset" function. PHP Warning: Undefined array key "h" in /path-to-script/script.php on line 452 This error is connected to line 45 ...

phphtml

Encountering difficulties with the functionality of Google Places API

I am attempting to incorporate the autocomplete functionality of Google Places API into a text field. Below is the code I have implemented: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script> <script ...

javascripthtmlgoogle-maps-api-3

What steps should I take to change the orientation of these items from vertical to horizontal display?

I'm struggling to get these items to appear horizontally (side by side) instead of vertically on my webpage. They are linked to a database, hence the PHP code included here. If you need more information, please feel free to ask. body { font: no ...

htmlcssdatabaseinlinedisplay

Align the text in the center of the image, which is depicted as a bullet point

I am currently using images as bullet points for my Github Pages (markdown files), following the instructions outlined here. My goal now is to vertically center the text next to the image. This is demonstrated here (cf. lower third of page), however, I am ...

htmlcssmarkdowngithub-pagesinline-styles

FancyBox - Is there a "Never show this message again" option available?

I implemented FancyBox on my website to display important information to users. However, I would like to enhance the user experience by adding a button that allows them to set a cookie and prevent the message from popping up for about a month. Since I&apo ...

javascriptjqueryhtmlfancyboxfancybox-2

Anchor point located within a scrollable div with a fixed position

A unique challenge has presented itself with a div called #results that appears when words are entered into a text box, triggering relevant results. This particular div is fixed and scrollable, with pagination located at the bottom of the scroll. The iss ...

javascriptjqueryhtmlcssajax

Error: Property 'onclick' cannot be set on a null object

JavaScript isn't my strong suit, so I'm struggling to solve this issue. The console is showing me the following error message: Uncaught TypeError: Cannot set property 'onclick' of null <script> var modal = document.getE ...

javascripthtmlcss

Replace particular letters within the text with designated spans

Suppose I have this specific HTML code snippet: <div class="answers"> He<b>y</b> <span class='doesntmatter'>eve</span>ryone </div> Additionally, imagine I possess the subsequent array: ['correct' ...

javascriptjqueryhtml

Significant empty space to the left of content due to Zurb Foundation

I'm currently utilizing Zurb Foundation within a rails project. My goal is to structure a basic page that consists of a table, text field, and a couple of buttons. However, I am facing a significant gap on the left side of my content, causing the rig ...

htmlcssruby-on-railszurb-foundation

Adjust the size of a Div/Element in real-time using a randomly calculated number

Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the ...

javascripthtmlcss

What is an easy method for including a broader div within a Y-scrolling container containing multiple divs?

Here is a scenario for consideration: http://codepen.io/anon/pen/NPGKPq Is there a CSS approach, without incorporating Javascript, to display the full width of the blue div? Essentially, rather than having a horizontal scrollbar, only show a vertical scr ...

css

What is the best way to show only one div at a time when selecting from navbar buttons?

To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code: For example: If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidde ...

javascripthtmljquerycss

What is the best way to include a validation process for Login Details in case of errors

Is it possible to implement Login Details confirmation for incorrect entries? My desired outcome is that when a user enters their credentials and the userID and Password are correct, but the user type is wrong, upon clicking the login button it should di ...

phphtml

Set a consistent pixel measurement for all images

I am working on a project where I have an image of a card that needs to be repeated 30 times. Each time the card is repeated, I want it to overlap with the previous card in a specific position, resembling a deck of cards. The issue I am facing is that whe ...

htmlcssvue.js

Unable to execute specific php function using ajax

I have created a script that utilizes an ajax request. This script is triggered when a user clicks a button on the index.php page, like so: Risorse.php <form method='post'> Name <input type='text' name='nome&apo ...

javascriptphphtmlajax

Utilize jQuery to style the background of the webpage, while excluding the Modal element when using Bootstrap

I'm currently working on implementing foggy.js () to create a blurred background effect for Bootstrap's Modal. While I've successfully blurred all elements in the background, the Modal Popup itself is also appearing blurry. So my question is ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to retrieve a GWT textbox value using Selenium WebDriver?

I'm currently testing my GWT application with selenium, and the HTML generated by GWT Textbox appears like this: <input type="text" class="gwt-TextBox" > Even though there's no value visible in the code above, I can see text in the UI. Is ...

htmlgwtselenium