CSS 网格布局隐藏中心列并调整网格以进行补偿答案

【问题标题】：CSS Grid Layout hide center column and adjust grid to compensateCSS 网格布局隐藏中心列并调整网格以进行补偿
【发布时间】：2020-04-17 21:33:31
【问题描述】：

我正在使用 CSS 网格布局来创建一个表格，并希望能够隐藏一个中心列并调整其余列以填补缺失列的空白。我将发布一些代码，以便您了解布局是如何工作的。我尝试了各种技巧，但实际上，我不是 CSS 大师。我有几张图片可以讲述整个故事。此外，HTML 只是一个片段，因为它就像一英里长。

截图

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

完整的网格是什么样子的

当我隐藏中心栏时

我希望它做什么

欢迎所有建议 - 谢谢！

【问题讨论】：

添加你的html代码
考虑使用隐式而不是显式列。 stackoverflow.com/q/43301949/3597276
我刚刚添加了 HTML - 它只是一个片段，因为它很长 - 谢谢！
感谢迈克尔的建议，我会考虑的。

标签： css grid css-grid

【解决方案1】：

我很好奇您为什么不为此使用实际的表格？我知道您只是向我们展示了布局的图像，我不知道您项目的所有要求。但这看起来是使用 HTML 表格的理想场所。使用表格肯定会更容易访问。

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

无论如何，您可以使用 grid-auto-flow 折叠从 DOM 中删除的列。

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

在下面的简单网格中，从 DOM 中删除任何网格子级将导致剩余的子级回流以填充空间。我希望您可以将其与当前代码一起使用。祝你好运。

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

【讨论】：

嗨，布莱恩，感谢您提供的代码片段。我同意 HTML 表格会更容易，但我想尝试一些新的东西。保重。
体验愉快。

【解决方案2】：

我在这里找到了一支笔：https://codepen.io/matuzo/pen/rmQvMG 它使用 JS 来切换网格类。这给了我尝试一个小改动的想法。因此，我将笔分叉以显示：无中心列并将所选类修改为具有两列而不是三列：https://codepen.io/SeanGahan/pen/jObMYKa

像这样：

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

小改动修复了网格布局以满足我的要求。感谢所有回答问题的人。

【讨论】：