Html - using grid css making columns width change dynamically

OrtalBlumenfeld
December 19, 2023
206 views
2 votes
3 Answers

Im using css grid.
I have 3 column which their total width is 100%
There is a button that clicking on it shows or hides the third column
I want that as soon as the third column is hidden, the width of the second column will be up to the end of the screen, the width of the second column and the width of the third column

Example

<div class="container">
  <div class="leftNav">left nav</div>
  <div class="center">center</div>
  <div id="right" class="rightNav">right nav</div>
</div>

<button onclick="myFunction()">Click Me</button>

function myFunction() {
  var x = document.getElementById("right");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.container {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
}

.leftNav{
  background-color:red;
}
.center{
  background-color:yellow;
}
.rightNav{
  background-color:green;
}

Tags: css html

Answers

I believe this is what you are looking for. I’ve commented the changes.

function toggleRightNav() {
  var rightNav = document.getElementById("right");
  var container = document.querySelector(".container");

  if (rightNav.style.display === "none") {
    rightNav.style.display = "block";
    container.style.gridTemplateColumns = "1fr 3fr 1fr"; // revert to original layout
  } else {
    rightNav.style.display = "none";
    container.style.gridTemplateColumns = "1fr 4fr"; // expand the center column
  }
}

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* adjusted fraction to control the width */
}

.leftNav {
  background-color: red;
}

.center {
  background-color: yellow;
}

.rightNav {
  background-color: green;
}

<div class="container">
  <div class="leftNav">left nav</div>
  <div class="center">center</div>
  <div id="right" class="rightNav">right nav</div>
</div>

<button onclick="toggleRightNav()">Click Me</button>

Instead of hiding the button, toggle a class on the container then hide it using CSS and at the same time change the grid structure

function myFunction() {
  var x = document.querySelector(".container");
  x.classList.toggle('hide')
}

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.leftNav {
  background-color: red;
}

.center {
  background-color: yellow;
}

.rightNav {
  background-color: green;
}



.container.hide .rightNav {
  display: none; /* hide the right nav */
}
.container.hide .center {
  grid-column: span 2; /* take 2 columns */
}

<div class="container">
  <div class="leftNav">left nav</div>
  <div class="center">center</div>
  <div class="rightNav">right nav</div>
</div>

<button onclick="myFunction()">Click Me</button>

You can try a simple fix of remixing one line of your CSS for the .container class, which is from this:

grid-template-columns: 1fr auto 1fr;

to this:

grid-template-columns: auto 1fr auto;

This makes it so the second column is always trying to take up what’s available, and the other columns take up as much as is required by its content. If you want to make the left and right a certain width, you can do that by adding the styles to the .leftNav and .rightNav classes respectively. e.g:

.leftNav {
  background-color: red;
  width: 20px; /* or whatever value you want to use */
}

the full code:

function myFunction() {
  var x = document.getElementById("right");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.container {
  display: grid;
  grid-template-columns: auto 1fr auto; /* this is where the change was made */
}

.leftNav {
  background-color: red;
  width: 75px; /* whatever figure want */
}

.center {
  background-color: yellow;
}

.rightNav {
  background-color: green;
  width: 150px; /* whatever figure want */
}

<div class="container">
  <div class="leftNav">left nav</div>
  <div class="center">center</div>
  <div id="right" class="rightNav">right nav</div>
</div>

<button onclick="myFunction()">Click Me</button>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – using grid css making columns width change dynamically

Answers