Estoy usando un diseño de cuadrícula CSS para crear una tabla y quiero poder ocultar una columna central y hacer que las columnas restantes se ajusten para llenar el vacío de la columna que falta. Solo publicaré un poco de código para que pueda ver cómo funciona el diseño. He intentado varios hacks, pero realmente, no soy el maestro de CSS. Tengo un par de imágenes que cuentan toda la historia. Además, el HTML es solo un recorte, porque es como una milla de largo.

Recorte

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




Cómo se ve la cuadrícula completa

Full Grid

Cuando escondo la columna central Cuando oculto la columna central

Lo que me gustaría que hiciera Lo que me gustaría que hiciera

Todas las sugerencias son bienvenidas. ¡Gracias!

0
Seán Gahan 18 abr. 2020 a las 00:33

2 respuestas

La mejor respuesta

Encontré un bolígrafo aquí: https://codepen.io/matuzo/pen/rmQvMG que usó JS para alternar la clase de cuadrícula. Eso me dio la idea de intentar un cambio menor. Entonces, bifurqué la pluma para mostrar: ninguna en la columna central y modifiqué la clase seleccionada para tener dos columnas en lugar de tres: https://codepen.io/SeanGahan/pen/jObMYKa

Así:

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

Los cambios menores arreglaron el diseño de la cuadrícula para cumplir con mis requisitos. Gracias a todos los que respondieron a la pregunta.

0
Seán Gahan 20 abr. 2020 a las 18:02

Tengo curiosidad por qué no estás usando una tabla real para esto? Sé que solo nos está mostrando una imagen del diseño y no conozco todos los requisitos para su proyecto. Pero este parece ser el lugar perfecto para usar una tabla HTML. Ciertamente sería más accesible usando una tabla.

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


De todos modos, puede usar use grid-auto-flow para contraer columnas que elimine del DOM.

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

En la cuadrícula simple a continuación, eliminar cualquiera de los elementos secundarios de la cuadrícula del DOM dará como resultado que los elementos secundarios restantes se vuelvan a llenar para llenar el espacio. Espero que puedas usar esto con tu código actual. Buena suerte.

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;
}
1
Bryan Sullivan 17 abr. 2020 a las 23:14