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

Ways to modify the CSS of an active class within a child component when clicking on another shared component in angular

In my HTML template, I am encountering an issue with two common components. When I click on the app-header link, its active class is applied. However, when I proceed to click on the side navbar's link, its active class also gets applied. I want to en ...

cssangulartypescriptsasscss-selectors

Difficulty encountered when trying to update a re-updated HTML DOM using Flask

I have a flask dropzone for file uploads, and after each upload I want to display a log text on the website. While it currently works, there is an issue where the log text does not update after the second upload. The website continues to show the text from ...

pythonhtmlajaxflask

magnify within a div with a set width

Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out. Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning to ...

cssangular

What is the most effective way to choose and give focus to an input using JavaScript or jQuery?

How do you use JavaScript or jQuery to focus on and select an input? This is the relevant snippet of my code: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </he ...

javascripthtmljquery

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...

javascriptjqueryhtmlcss

Utilizing REACT to dynamically load multiple HTML elements

Recently, I began developing with React and wanted to load multiple new Input Fields and Labels in a Form using Hooks. However, when clicking the button, only one input field is created using the last value of my array. Upon checking the console, I notic ...

htmlreactjs

Ensure that both the div element and its contents are restricted to a maximum width of

I'm having trouble arranging the display of information next to a plant image. I want to ensure that the information stays on the right side of the image when the screen reaches a specific minimum width. The issue arises when the information includes ...

htmlcss

Tips on moving information from one form to another after referencing the original page using Javascript and HTML

Imagine this scenario: A page with three text fields, each with default values. There is also a hyperlink that performs a database lookup and returns parameters to the same page where the hyperlink was clicked. The goal is for the text boxes to be automa ...

javascripthtmlperl

Having trouble with the input range slider on Chrome? No worries, it's working perfectly fine

I'm currently facing an issue with an input range slider that controls the position of an audio track. It seems to work perfectly in Firefox, but in Chrome, the slider gets stuck and doesn't move when dragged. There is a function in place that up ...

javascriptjqueryhtmlaudio

What is the best way to implement the nth:child selector in conjunction with the each function for handling JSON data in

Here is the HTML code I have written: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flickr Feed</title> <link href="../_css/site.css" rel="stylesheet"> <link rel="stylesheet" type= ...

jqueryhtmljson

HTMLMediaElement does not have the setSinkId method

I am currently in the process of developing a WebRTC application using Angular, with the goal of managing audio output through the setSinkId() method within HTMLMediaElement. However, when attempting to use this method, I am encountering an error message s ...

javascripthtmlwebrtc

Switching icon images using JQuery based on state changes

I'm attempting to switch the background image of my webpage's "body" element when the user toggles between playing and pausing music icons. This is what the CSS for the "body" element looks like: body { background: url('https://s3-us-wes ...

javascriptjqueryhtmlcss

Is there a way for me to view the contents within the box?

Hey there! I have a question about how to access the content inside this mysterious box "" within the style sheet. For instance, I am curious to find out the link of the image: .facebookicon::before { content: ""; } ...

csscss-content

Eliminating the 'white-space' surrounding concealed images

I am currently working on a project where I have a list of images that need to be hidden or shown based on the click event of specific <li> elements. While I have managed to achieve this functionality successfully, I am facing an issue with white spa ...

javascriptjquerycssjquery-mobile

What is the best way to deactivate div elements once an overlay has been applied to them?

My goal is to place an overlay on my form to prevent users from accessing the content. Even though I have added an overlay, users can still interact with input fields. How can I prevent that? .overlay { background: rgba(0, 0, 0, .75); text-align: ce ...

javascriptjqueryhtmlcss

How to create a bottom border in several TD elements using a combination of CSS and jQuery

Check out my Website: Search Page I have written some CSS that functions well when searching by Name, but not by Specialty: .displayresult { display: block; } #fname, #lname, #splabel, #addlabel, #pnlabel { border-width: 4px; border-bottom-st ...

jquerycss

Align the UL in HTML to be on the same line as other spans

When examining this jsFiddle demonstration at the following link: http://jsfiddle.net/jrXwf/1/ The UL tag showcases a star rating, with accompanying text displayed on the line below it. Is there a method to have everything appear on a single line? Appre ...

htmlcss

The HTML Canvas seems to be malfunctioning for some unknown reason

As a beginner in programming, I am struggling to understand why the code below is not working. The first three lines of the script are necessary for another part of the webpage, but I don't see how that would affect the rest of the code: <!DOCTY ...

javascripthtml

What is the best technique for positioning a div using the ELEMENT_NODE method?

　　#top { height: .5rem; padding-left: 2.7rem; line-height: .5rem; color: #666; font-size: .12rem; position: relative; background-color: rgb(241, 241, 241); } #top div { position: ...

htmlcss

SyntaxError: The input on line one ended unexpectedly and was not caught

This issue is commonly associated with messy close parentheses, however, the error is occurring on line 1 of the file! Below is the javascript code from (filename: calculate.js) var colors = new Array(); colors["SILVER"] = -2; ... Although there is m ...

javascripthtmlsyntaxsyntax-error