Question 246435 in Html Question posted in
Some basic documentation can be found here.

Html – CSS grid How to toggle children visibility without the need to change grid-template-columns

Given the following layout:

 <div id="grid" style="display: grid; grid-template-columns: min-content auto; width: 100px; height: 100px; border: 1px solid #ccc;">
    <div id="first" style="width: 20px; background-color: green;">
      
    </div>
    <div style="background-color: cyan;">
    </div>
  </div>

I want to toggle visibility of the "first" child so the second one will occupy the remaining space.

The grid seems to be doing a silly thing by re-assigning the hidden column definition to the next visible one, so after hiding the first child the second one becomes "the first" as far as the grid layout sees it and it inherently uses "auto". Since there’s no content in the child child it just doesn’t display anything. I’d expect grid-template-columns to stick regardless of the actual columns visibility.

If the child would got physically removed from the grid the latter would be in its full right to do that, but I’m only changing the visibility.

Needing to manage grid-template-columns for such a scenario creates a totally unnecessary overhead in my opinion, I’d appreciate if people can share their thoughts on it.

I’m aware of the fact that some layouts for example those which use repeat(...) may not suffer form the issue, but I’m looking for a fix just for my scenario.

Tags:

2

Answers


  1. 0

    You can give grid-column: span 2; to an element so that it takes up its own space + the space of the element that receives display: none;:

    .grid {
  display: grid;
  grid-template-columns: min-content auto;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

.one {
  width: 20px;
  background-color: green;
}

.grid:hover .one {
  display: none;
}

.grid:hover .one + .two {
  grid-column: span 2;
}

.two {
  background-color: cyan;
}
    <div class="grid">
  <div class="one"></div>
  <div class="two"></div>
</div>
    Login or Signup to reply.
  2. 0

    If you want to toggle the visibility of the "first" child while keeping the second child in its original position and size, you can achieve this by modifying the CSS. One way to do it is by setting a fixed width for the first column, so it doesn’t change when you hide the first child.

    Here’s an example:

    <div id="grid" style="display: grid; grid-template-columns: 20px auto; width: 100px; height: 100px; border: 1px solid #ccc;">
  <div id="first" style="width: 20px; background-color: green;">
    <!-- Content of the first child -->
  </div>
  <div style="background-color: cyan;">
    <!-- Content of the second child -->
  </div>
</div>

    The first column is given a fixed width of 20px, which ensures that it doesn’t change when you hide the "first" child. The second column still takes up the remaining space, as specified by "auto."

    This approach avoids the need to manage grid-template-columns dynamically when toggling visibility, as the column widths are explicitly defined.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search