Сетка недостаточно гибкая для сортировки сообщений - PullRequest
Новая
       10

Сетка недостаточно гибкая для сортировки сообщений

0 голосов
/ 11 декабря 2018

У меня есть любопытная проблема с сеткой, и я просто не могу найти решение для нее!Я разработал сайт с сеткой для размещения обложек моего клиента, и я создал его с помощью WordPress и CSS сетки.Эта сетка работает нормально и приспосабливает работу так, как я хочу, но проблема возникает, когда я использую вкладки сортировки записей в верхней части (Иллюстрация, Рисунки или Наброски).Когда вы щелкаете одну из этих вкладок, обложка скрывается (с помощью display: none;), но не удаляется из сетки, что приводит к появлению пустых мест в сетке.

Это происходит потому, что я помещаю каждый элемент в сетку с помощью: nth-child, например: 

.grid__item:nth-child(2) {
    grid-row: 1 / span 5;
    grid-column: 8 / 10 span;
}

Моя сетка css выглядит следующим образом: 

.grid--category {
    @media (min-width: 480px) {
        grid-column-start: auto;
        grid-gap: 7px;
        display: grid;
        grid-template-columns: repeat(24, 1fr);
        grid-template-rows: repeat(19, 6vw);
    }

    @media (min-width: 1530px) {
        grid-template-rows: repeat(19, minmax(68px,min-content));
    }

    .grid__item {
        @media (min-width: 480px) {
            grid-column-start: auto;
            grid-row-start: auto;
            position: relative;
            width: 100%;

            // 1st row
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
                grid-row: 1 / span 5;
            }
            // 2nd row
            &:nth-child(4),
            &:nth-child(5),
            &:nth-child(6) {
                grid-row: 6 / span 5;
            }
            // 3rd row
            &:nth-child(7),
            &:nth-child(8),
            &:nth-child(9),
            &:nth-child(10) {
                grid-row: 11 / span 4;
            }
            // 4th row
            &:nth-child(11),
            &:nth-child(12),
            &:nth-child(13) {
                grid-row: 15 / span 5;
            }

            &:nth-child(1) {
                grid-column: 8 / 10 span;
            }
            &:nth-child(2) {
                grid-column: 1 / span 7;
            }
            &:nth-child(3) {
                grid-column: 18 / span 7;
            }
            &:nth-child(4) {
                grid-column: 1 / span 8;
            }
            &:nth-child(5) {
                grid-column: 9 / span 8;
            }
            &:nth-child(6) {
                grid-column: 17 / span 8;
            }
            &:nth-child(7) {
                grid-column: 1 / span 6;
            }
            &:nth-child(8) {
                grid-column: 7 / span 6;
            }
            &:nth-child(9) {
                grid-column: 13 / span 6;
            }
            &:nth-child(10) {
                grid-column: 19 / span 6;
            }
            &:nth-child(11) {
                grid-column: 1 / span 8;
            }
            &:nth-child(12) {
                grid-column: 9 / span 8;
            }
            &:nth-child(13) {
                grid-column: 17 / span 8;
            }
            &:nth-child(1n) {
                .card__title {
                    top: 0;
                    left: 0;
                    right: 0;
                    margin: 0;
                    bottom: 0;
                }
            }
        }
    }

    .grid__item-header {
        @media (min-width: 480px) {
            border-width: 0 7px 7px 7px;
            margin-left: -7px;
            border-style: solid;
            border-color: #fff;
            height: 109%;
            z-index: 10;
            width: 107%;
        }

        @media (min-width: 770px) {
            width: 104%;
        }

        @media (min-width: 1200px) {
            width: 103%;
        }
    }
}

Дизайн:

site-design

Мой вопрос: какой метод будет лучшим для построения этого точного дизайна сетки?Это действительно должно быть гибким для сортировки вкладок для работы.Можно ли построить этот дизайн с помощью CSS-сетки, но сохранить его достаточно гибким?или любой другой метод, который вы бы порекомендовали?Буду очень признателен за любые идеи или советы, как справиться с этой сеткой !!

Текущую реализацию вы можете увидеть здесь: http://www.wp -staging.pixelsandbeyond.io / drawing /

Заранее спасибо!

1 Ответ

0 голосов
/ 13 декабря 2018

Через пару дней, вырывая свои волосы, я нашел похожий макет в лабораториях Джена Симмонса: https://labs.jensimmons.com/2016/examples/image-gallery-grid-1.html

Это, кажется, самое близкое к тому, что мне нужно, так что япросто собираюсь придерживаться этого и закрывать этот вопрос.Спасибо!

...