CSS Grid Layout скрыть центральный столбец и настроить сетку для компенсации - PullRequest
Новая
       17

CSS Grid Layout скрыть центральный столбец и настроить сетку для компенсации

0 голосов
/ 18 апреля 2020

Я использую сетку 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>

Как выглядит полная сетка

Full Grid

Когда я скрываю центральный столбец When I hide the center column

Что я хотел бы сделать What I would like it to do

Все предложения приветствуются - спасибо!

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

Мне любопытно, почему вы не используете для этого фактическую таблицу? Я знаю, что вы только показываете нам изображение макета, и я не знаю всех требований для вашего проекта. Но это выглядит как идеальное место для использования 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;
}
0 голосов
/ 20 апреля 2020

Я нашел здесь ручку: 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;
}

Незначительные изменения исправили расположение сетки в соответствии с моими требованиями. Спасибо всем, кто ответил на вопрос.

...