How to hide css grid row gap

user_2991069 0
Viewed 1560

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>
css-grid css
2 Answers

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>

user_137815420

Try the following snippet:

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

.Header{
   grid-area: Header;
}
.hideRow{
    visibility: hidden;
    position: absolute;
    grid-area: hideRow;
}
.first{
    grid-area: first;
}
.second{
    grid-area: second;
}
.third{
    grid-area: third;
}
.fourth{
    grid-area: fourth;
}
.fifth{
    grid-area: fifth;
}  
.mainDivPadding{
    padding: 5%;
}
<div class="mainDivPadding" cstyle={{padding:'5%'}}>
  <div class="content" className={"content"}>
    <div class="Header" className={"Header"}>
      Header
    </div>
    <div class="hideRow" className={"hideRow"}>
      hiderow
    </div>
    <div class="first" className={"first"}>
      first
    </div>
    <div class="second" className={"second"}>
      second
    </div>
    <div class="third" className={"third"}>
      third
    </div>
    <div class="fourth" className={"fourth"}>
      fourth
    </div>
    <div class="fifth" className={"fifth"}>
      fifth
    </div>
  </div>
</div>

I had some issues with your className={"hideRow"} recognizing the visibility: hidden; and position: absolute; I've added in the hideRow class to the tag you're looking to be hidden. However, this should work.

user_140955220
Related