CSS Grid Layout hide center column and adjust grid to compensate

Question

I'm using a CSS Grid layout to create a table and want to be able to hide a center column and have the remaining columns adjust to fill the void from the missing column. I'll just post a bit of code so you can see how the layout is working. I've tried various hacks, but really, I am just not the CSS master. I have a couple of images that tell the whole story. Also, the HTML is just a snip, cuz it's like a mile long.

Snip

$('.Middle').attr('style', 'visibility: hidden');

.grid {
  display: grid;
  grid-template-columns: 8% 8% 27% 27% 27%;
  grid-template-rows: 40px 40px;
  grid-auto-flow: row;
  grid-gap: 5px;
}

.grid--full {
  grid-template-columns: 300px 300px 300px;
  grid-template-rows: 200px;
  grid-gap: 10px;
}

.zone-Header {
  grid-column: 1;
  grid-row: 1 / 3;
  background: url(/assets/img/patterns/breadcrumbsAOF.png) repeat;
  border-radius: 5px;
}

.Bank-Front {
  grid-column: 2 / 4;
  grid-row: 1;
  border-radius: 5px;
  background: url(/assets/img/patterns/breadcrumbsAOF.png) repeat;
}

.Bank-Middle {
  grid-column: 4;
  grid-row: 1;
  border-radius: 5px;
  background: url(/assets/img/patterns/breadcrumbsAOF.png) repeat;
}

.Bank-Back {
  grid-column: 5;
  grid-row: 1;
  border-radius: 5px;
  background: url(/assets/img/patterns/breadcrumbsAOF.png) repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
  <div class="Bank-Front">
    <h2 class="text-center">FRONT</h2>
  </div>
  <div class="Bank-Middle Middle">
    <h2 class="text-center">MIDDLE</h2>
  </div>
  <div class="Bank-Back">
    <h2 class="text-center">BACK</h2>
  </div>
  <div class="Bank-Front-Header-Vane">
    <h4 class="text-center">VANE</h4>
  </div>
  <div class="zone-Header">
    <h4 class="text-center text-bold">ZONE</h4>
  </div>

  <!--header-->

  <div class="Bank-Front-Header">
    <div class="row">
      <div class="col-xs-6">
        <h4 class="text-center">NOZZLES</h4>
      </div>
      <div class="col-xs-6">
        <h4 class="text-center">COLOR</h4>
      </div>
    </div>
  </div>
  <div class="Bank-Middle-Header Middle">
    <div class="row">
      <div class="col-xs-6">
        <h4 class="text-center">NOZZLES</h4>
      </div>
      <div class="col-xs-6">
        <h4 class="text-center">COLOR</h4>
      </div>
    </div>
  </div>
  <div class="Bank-Back-Header">
    <div class="row">
      <div class="col-xs-6">
        <h4 class="text-center"> NOZZLES</h4>
      </div>
      <div class="col-xs-6">
        <h4 class="text-center">COLOR</h4>
      </div>
    </div>
  </div>


  <!-----ZONE 1 ------------->
  <!--zone labels-->

  <div class=" zone1-Orchard">
    <br />
    <br />
    <br />
    <br />
    <h5 class="text-center text-bold">TOP ZONE 1</h5>
  </div>

  <!--Zone1 row 1-->

  <div class="zone1-Orchard-Front-Vane-1">
    <center> <button class="btn btn-primary rounded" style="width:100%;">1</button></center>
  </div>
  <div class="zone1-Orchard-Front-1">
    <div class="row">
      <div class="col-xs-1 no-gutter"> </div>
      <div class="col-xs-4 no-gutter">
        &nbsp;
        <select class="form-control-AOF" id="V1F">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
      <div class="col-xs-6">
        &nbsp;
        <select class="form-control-AOF z1f" id="C1F">
          <option value="BROWN">BROWN</option>
          <option value="LIME">LIME</option>
          <option value="YELLOW">YELLOW</option>
          <option value="LIGHT-BLUE">LIGHT-BLUE</option>
          <option value="ORANGE">ORANGE</option>
          <option value="RED">RED</option>
          <option value="GREY">GREY</option>
          <option value="GREEN">GREEN</option>
          <option value="BLACK">BLACK</option>
          <option value="BLUE">BLUE</option>
        </select>
        &nbsp;
      </div>
    </div>
  </div>
  <div class="zone1-Orchard-Middle-1 Middle">
    <div class="row">
      <div class="col-xs-1"> </div>
      <div class="col-xs-4">
        &nbsp;
        <select class="form-control-AOF" id="V1M">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
      <div class="col-xs-6 smaller">
        &nbsp;
        <select class="form-control-AOF z1m" id="C1M">
          <option value="BROWN">BROWN</option>
          <option value="LIME">LIME</option>
          <option value="YELLOW">YELLOW</option>
          <option value="LIGHT-BLUE">LIGHT-BLUE</option>
          <option value="ORANGE">ORANGE</option>
          <option value="RED">RED</option>
          <option value="GREY">GREY</option>
          <option value="GREEN">GREEN</option>
          <option value="BLACK">BLACK</option>
          <option value="BLUE">BLUE</option>
        </select>
      </div>
    </div>
  </div>
  <div class="zone1-Orchard-Back-1">
    <div class="row">
      <div class="col-xs-1 "></div>
      <div class="col-xs-4">
        &nbsp;
        <select class="form-control-AOF" id="V1B">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
      <div class="col-xs-6">
        &nbsp;
        <select class="form-control-AOF z1b" id="C1B">
          <option value="BROWN">BROWN</option>
          <option value="LIME">LIME</option>
          <option value="YELLOW">YELLOW</option>
          <option value="LIGHT-BLUE">LIGHT-BLUE</option>
          <option value="ORANGE">ORANGE</option>
          <option value="RED">RED</option>
          <option value="GREY">GREY</option>
          <option value="GREEN">GREEN</option>
          <option value="BLACK">BLACK</option>
          <option value="BLUE">BLUE</option>
        </select>
      </div>
    </div>
  </div>

What the full grid looks like

When I hide the center column

What I would like it to do

All suggestions are welcome - Thanks!

Consider using implicit, instead of explicit, columns. https://stackoverflow.com/q/43301949/3597276 — Michael Benjamin, Apr 17 '20 at 21:41
I just added the HTML - it's just a snip because it's pretty long - Thanks! — Seán Gahan, Apr 17 '20 at 21:43

Bryan Sullivan · Answer 1 · 2023-03-11T13:16:47.973

I'm curious why you aren't using an actual table for this? I know you're only showing us an image of the layout and I don't know all the requirements for your project. But this looks like the perfect place to use an HTML table. It would certainly be more accessible using a table.

https://www.w3.org/WAI/tutorials/tables/irregular/

Anyway, you can use use grid-auto-flow to collapse columns you remove from the DOM.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

In the simple grid below, removing any of the grid children from the DOM will result in the remaining children reflowing to fill the space. I hope you can use this with your current code. Good luck.

.grid {
  background-color: lightblue;
  height: 100%;
  display: grid;
  grid-auto-flow: column dense;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
}

.a {
  background-color: lightcoral;
}

.b {
  background-color: lightgreen;
}

.c {
  background-color: yellow;
}

.d {
  background-color: violet;
}

<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

Hey Bryan, thanks for the code snip. I agree an HTML table would have been easier, but I was looking to try something new. Take care. — Seán Gahan, Apr 18 '20 at 00:16

score 1 · Accepted Answer · answered Apr 20 '20 at 18:02

I found a pen here: https://codepen.io/matuzo/pen/rmQvMG which used JS to toggle the grid class. That gave me the idea to try a minor change. So, I forked the pen to display:none the center column and modified the selected class to have two column rather than three: https://codepen.io/SeanGahan/pen/jObMYKa

like this:

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px;
  grid-gap: 20px;
  transition: all 1s;
}

.grid--full {
  grid-template-columns: 300px 300px;
  grid-template-rows: 100px;
  grid-gap: 10px;
}

The minor changes fixed the grid layout to meet my requirements. Thanks to all that replied to the question.

CSS Grid Layout hide center column and adjust grid to compensate

2 Answers2