How to hide css grid row gap

Question

I am using css grid in my project.I have 4 rows,4 columns and grid-gap 10px. For first and second row will take 100% width. But sometimes i need to hide second row based on server response.If i do like display none for second row there is gap 20px between 1st row and 3rd row. I want to hide row with gap in css grid otherwise it looks odd there.

code:

if i add hideRow display,height properties grid gap between first and third row 20px. I wanted to make it 10px.

   .content > * {
    background: green;
    padding: 10px;
}

.Header{
   grid-area: Header;
}
.hideRow{
    /*display: none;*/
    /*height: 0;*/
    grid-area: hideRow;
}
.first{
    grid-area: first;
}
.second{
    grid-area: second;
}
.third{
    grid-area: third;
}
.fourth{
    grid-area: fourth;
}
.fifth{
    grid-area: fifth;
}
    
            <div style={{padding:'5%'}}>
                <div className={"content"}>
                    <div className={"Header"}>
                        Header
                    </div>
                    <div className={"hideRow"}>
                        hiderow
                    </div>
                    <div className={"first"}>
                        first
                    </div>
                    <div className={"second"}>
                        second
                    </div>
                    <div className={"third"}>
                        third
                    </div>
                    <div className={"fourth"}>
                        fourth
                    </div>
                    <div className={"fifth"}>
                        fifth
                    </div>
    
                </div>
            </div>

Answer 1

You could try to create a class that override your grid-template-areas:

.content {
   grid-template-areas: "Header Header Header Header"
                        "hideRow hideRow hideRow hideRow"
                        "first second fifth fifth"
                        "third fourth fifth fifth";
}

with:

.content-hide-row {   
    grid-template-areas: "Header Header Header Header"
                        /* deleting this row*/
                        "first second fifth fifth"
                        "third fourth fifth fifth";
}

And adding it to the content container when you need to hide the row.

Also adding a class with visibility: hidden and display: none like this:

.hide {
  visibility: hidden;
  display: none;
}

and then attaching it to the hideRow when you need it.

I leave here a snippet and tell me if this could help.

.content {
    margin-bottom: 50px;
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 60px 100px 100px 100px;
    grid-gap: 10px;
  
    grid-template-areas: "Header Header Header Header"
                        "hideRow hideRow hideRow hideRow"
                        "first second fifth fifth"
                        "third fourth fifth fifth";

}

.content-hide-row {
  grid-template-areas: "Header Header Header Header"
                       
                        "first second fifth fifth"
                        "third fourth fifth fifth";
}

.hide {
  visibility: hidden;
  display: none;
}

.content > * {
    background: green;
    padding: 10px;
    color: white;
    
}

.header{
   grid-area: Header
}

.hideRow{
   grid-area: hideRow;
}

.first {
  grid-area: first; 
}

.second{
  grid-area: second;
}

.third{
  grid-area: third;
}

.fourth{
  grid-area: fourth;
}

.fifth{
    grid-area: fifth;
 }

<div class="content">
  <div class="header">Header</div>
  <div class="hideRow">hideRow</div>
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
  <div class="fifth">Fifth</div>
</div>

<div class="content content-hide-row">
  <div class="header">Header</div>
  <div class="hideRow hide">hideRow</div>
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
  <div class="fourth">Fourth</div>
  <div class="fifth">Fifth</div>
</div>