Question

我有一个奇怪的网格问题，但无法解决该问题！我设计了一个带有网格的网站来容纳我的客户的作品，并使用WordPress和CSS网格来构建它。该网格工作正常，可以根据需要容纳工作，但是当我使用顶部的帖子排序选项卡（插图，绘画或草图）时，就会出现问题。当您单击这些选项卡之一时，图稿将被隐藏（通过应用显示：无；），但不会从网格中删除，从而导致网格中出现空白。

之所以发生这种情况，是因为我将每个元素放在网格中，例如：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%;
        }
    }
}

设计是：

我的问题是，哪种技术最适合构建这种精确的网格设计？确实需要灵活才能对选项卡进行排序。是否可以使用CSS网格构建此设计，但保持足够的灵活性？或您会推荐的其他任何技术？任何想法或建议如何解决这个网格将不胜感激！

您可以在此处查看有关暂存的当前实现：http://www.wp-staging.pixelsandbeyond.io/drawings/

提前谢谢！

Answer 1

几天后拔出头发，我在詹·西蒙斯（Jen Simmons）的实验室中发现了类似的布局：https://labs.jensimmons.com/2016/examples/image-gallery-grid-1.html

这似乎是最接近我需要的内容，因此我将坚持并结束这个问题。谢谢！

网格不够灵活，无法对帖子进行排序

1 个答案: