Solution 1 :

Change your css for .header_container h2 like below and it should work.

.header_container h2 {
        margin: 0;

Solution 2 :

It is happening because you are using position absolute for the h2 heading.]

.header_container h2 {
/*   position: absolute;
  bottom: 0;
  padding: 0;
  margin: 0; 

What position absolute does that it makes the element like a ghost and it is not able to take any space in the HTML flow. If you want to use absolute position use it on the parent that is on <div class="two">Two</div>

If you find the answer helpful then please accept it. It lets others know that it is the correct answer.

Problem :

I am using css grid in my demo application.My application is working fine when I have small heading or small title (h2).

but when The title is big my application works behave buggy or not as expected output .

here is my code

<!DOCTYPE html>
<html lang="en-US" class="no-js">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        .wrapper {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 40px);

        .one {
            grid-column: 2/5;
            grid-row: 2/5;
            background-color: #ee0

        .two {
            grid-column: 4/8;
            grid-row: 3/8;
            background-color: #eee;
            padding: 20px;
            border: 1px solid #000

        .header_container {
            position: relative;
            border: 1px solid #000;
            min-height: 50px


        .header_container h2 {
            position: absolute;
            bottom: 0;
            padding: 0;
            margin: 0;

<div class="wrapper">
    <div class="one">one</div>
    <div class="two">Two
        <div class="header_container">
            <h2>Lorem ipsum dolor sit amet</h2>


First case (which is working fine) when tile is smallenter image description here

Case two when Title is show like this which is wrong. It overlap the Two text and not increase the container.
enter image description here

Expected output.

  1. When Title text increase both black border container increase in upward direction .Inner black border and outer black border grows in upward direction.
  2. It will not overlap the text (TWO)

Expected output screenhot
enter image description here


Comment posted by user5711656

it is increasing div height in downward direction …I want it should increase in upword direction

Comment posted by Ashish Narnoli

Can you post the expected result screen-shot?

Comment posted by user5711656

attached expected screen shot..I am not able preble this solution

Comment posted by user5711656

please delete your answer not helpful .. after this it grow in downward direction

Comment posted by Arun Bohra

Can you explain ur question and also expected output a little better because if you want it to go upwards then it will surely overlap with the text two. U can use the image of the output.

Comment posted by user5711656

see the attached image as a expected output