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

/*CSS Part*/
.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;
}

/*JS part*/
 $('.Middle').attr('style', 'visibility: hidden');

/* HTML */
<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

score 1 · Answer 1 · answered Apr 17 '20 at 23:14

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.

HTML:

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

CSS:

.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;
}

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 0 · 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