如何使网格响应？

Question

我正在进行 css网格设计，并且在桌面视图上工作正常。 ¿我如何使其具有响应性？

我要用背景图像显示一个部分，稍后我添加几篇文章以在图像上显示网格。就像我说的那样，它可以在台式机上正常工作，但在响应速度上却不太好

我想知道如何使它响应。

非常感谢

这是我的CSS代码：

body {
        margin: 0;
        padding: 0;
        font-family: 'Arvo', serif;
        text-transform: uppercase;
        color: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #cuadricula {
        width: 600px;
        height: 900px;
        display: grid;
            grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 100px 100px 100px 100px 100px 100px 100px 100px;
        grid-gap: 1px;
        background: #c51162;
        border: 1px solid #FFF;
        overflow: hidden;
    }

    #cuadricula__img {
        width: 600px;
        height: 900px;
        object-fit: cover;
        grid-row: 1 / 8;
        grid-column: 1/3;
    }

    .item_cuadricula_1,
    .item_cuadricula_2,
    .item_cuadricula_3,
    .item_cuadricula_4,
    .item_cuadricula_5,
    .item_cuadricula_6,
    .item_cuadricula_7,
    .item_cuadricula_8,
    .item_cuadricula_9,
    .item_cuadricula_10,
    .item_cuadricula_11,
    .item_cuadricula_12,
    .item_cuadricula_13,
    .item_cuadricula_14,
    .item_cuadricula_15,
    .item_cuadricula_16,
    .item_cuadricula_17,
    .item_cuadricula_18,
    .item_cuadricula_19,
    .item_cuadricula_20,
    .item_cuadricula_21,
    .item_cuadricula_22,
    .item_cuadricula_23,
    .item_cuadricula_24,
    .item_cuadricula_25,
    .item_cuadricula_26,
    .item_cuadricula_27 {
        border: 1px solid #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        /*            background: rgba(0, 0, 0, 0.70);*/
    }

    .item_cuadricula_1 {
        grid-column: 1;
        grid-row: 1;
        background: rgba(253, 85, 143, 0.60);
    }

    .item_cuadricula_2 {
        grid-column: 2;
        grid-row: 1;
        background: rgba(0, 57, 203, 0.60);
    }

    .item_cuadricula_3 {
        grid-column: 3;
        grid-row: 1;
        background: rgba(0, 150, 36, 0.60);
    }

    .item_cuadricula_4 {
        grid-column: 1;
        grid-row: 2;
        background: rgba(199, 165, 0, 0.60);
    }

    .item_cuadricula_5 {
        grid-column: 2;
        grid-row: 2;
        background: rgba(135, 0, 0, 0.60);
    }

    .item_cuadricula_6 {
        grid-column: 3;
        grid-row: 2;
        background: rgba(103, 218, 255, 0.60);
    }

    .item_cuadricula_7 {
        grid-column: 1;
        grid-row: 3;
        background: rgba(175, 68, 72, 0.60);
    }

    .item_cuadricula_8 {
        grid-column: 2;
        grid-row: 3;
        background: rgba(240, 98, 146, 0.60);
    }

    .item_cuadricula_9 {
        grid-column: 3;
        grid-row: 3;
        background: rgba(186, 104, 200, 0.60);
    }

    .item_cuadricula_10 {
        grid-column: 1;
        grid-row: 4;
        background: rgba(255, 241, 118, 0.60);
    }

    .item_cuadricula_11 {
        grid-column: 2;
        grid-row: 4;
        background: rgba(181, 61, 0, 0.60);
    }

    .item_cuadricula_12 {
        grid-column: 3;
        grid-row: 4;
        background: rgba(62, 39, 35, 0.60);
    }

    .item_cuadricula_13 {
        grid-column: 1;
        grid-row: 5;
        background: rgba(112, 112, 112, 0.60);
    }

    .item_cuadricula_14 {
        grid-column: 2;
        grid-row: 5;
        background: rgba(0, 178, 204, 0.60);
    }

    .item_cuadricula_15 {
        grid-column: 3;
        grid-row: 5;
        background: rgba(255, 255, 114, 0.60);
    }

    .item_cuadricula_16 {
        grid-column: 1;
        grid-row: 6;
        background: rgba(255, 241, 118, 0.60);

    }

    .item_cuadricula_17 {
        grid-column: 2;
        grid-row: 6;
        background: rgba(82, 76, 0, 0.60);
    }

    .item_cuadricula_18 {
        grid-column: 3;
        grid-row: 6;
        background: rgba(157, 70, 255, 0.60);
    }

    .item_cuadricula_19 {
        grid-column: 1;
        grid-row: 7;
        background: rgba(172, 8, 0, 0.60);
    }

    .item_cuadricula_20 {
        grid-column: 2;
        grid-row: 7;
        background: rgba(0, 136, 163, 0.60);
    }

    .item_cuadricula_21 {
        grid-column: 3;
        grid-row: 7;
        background: rgba(197, 17, 98, 0.60);
    }

    .item_cuadricula_22 {
        grid-column: 1;
        grid-row: 8;
        background: rgba(186, 104, 200, 0.60);
    }

    .item_cuadricula_23 {
        grid-column: 2;
        grid-row: 8;
        background: rgba(253, 85, 143, 0.60);
    }

    .item_cuadricula_24 {
        grid-column: 3;
        grid-row: 8;
        background: rgba(0, 57, 203, 0.60);
    }

    .item_cuadricula_25 {
        grid-column: 1;
        grid-row: 9;
        background: rgba(0, 150, 36, 0.60);
    }

    .item_cuadricula_26 {
        grid-column: 2;
        grid-row: 9;
        background: rgba(0, 178, 204, 0.60);
    }

    .item_cuadricula_27 {
        grid-column: 3;
        grid-row: 9;
        background: rgba(10, 0, 182, 0.60);
    }

    @media only screen and (max-width: 360px) {
        #cuadricula {
            grid-template-columns: 1fr 1fr 1fr;
            width: 100%;
        }
        #cuadricula__img {
            width: 100%;
            height: 900px;
        }
        .item_cuadricula_1,
        .item_cuadricula_2,
        .item_cuadricula_3,
        .item_cuadricula_4,
        .item_cuadricula_5,
        .item_cuadricula_6,
        .item_cuadricula_7,
        .item_cuadricula_8,
        .item_cuadricula_9,
        .item_cuadricula_10,
        .item_cuadricula_11,
        .item_cuadricula_12,
        .item_cuadricula_13,
        .item_cuadricula_14,
        .item_cuadricula_15,
        .item_cuadricula_16,
        .item_cuadricula_17,
        .item_cuadricula_18,
        .item_cuadricula_19,
        .item_cuadricula_20,
        .item_cuadricula_21,
        .item_cuadricula_22,
        .item_cuadricula_23,
        .item_cuadricula_24,
        .item_cuadricula_25,
        .item_cuadricula_26,
        .item_cuadricula_27 {
            background: none;
        }
        body {
            font-size: 0.5em;
        }
    }

    @media only screen and (min-width:1920px) {}

这是我的HTML

 <section id="cuadricula">
    <img src="Wonder-Woman-2017-Poster-dceu-dc-extended-universe-41499151-1382-2048.jpg" alt="Cachorro" id="cuadricula__img">


    <article class="item_cuadricula_1">fila 1 columna 1</article>
    <article class="item_cuadricula_2">fila 1 columna 2</article>
    <article class="item_cuadricula_3">fila 1 columna 3</article>

    <article class="item_cuadricula_4">fila 2 columna 1</article>
    <article class="item_cuadricula_5">fila 2 columna 2</article>
    <article class="item_cuadricula_6">fila 2 columna 3</article>

    <article class="item_cuadricula_7">fila 3 columna 1</article>
    <article class="item_cuadricula_8">fila 3 columna 2</article>
    <article class="item_cuadricula_9">fila 3 columna 3</article>

    <article class="item_cuadricula_10">fila 4 columna 1</article>
    <article class="item_cuadricula_11">fila 4 columna 2</article>
    <article class="item_cuadricula_12">fila 4 columna 3</article>

    <article class="item_cuadricula_13">fila 5 columna 1</article>
    <article class="item_cuadricula_14">fila 5 columna 2</article>
    <article class="item_cuadricula_15">fila 5 columna 3</article>

    <article class="item_cuadricula_16">fila 6 columna 1</article>
    <article class="item_cuadricula_17">fila 6 columna 2</article>
    <article class="item_cuadricula_18">fila 6 columna 3</article>

    <article class="item_cuadricula_19">fila 7 columna 1</article>
    <article class="item_cuadricula_20">fila 7 columna 2</article>
    <article class="item_cuadricula_21">fila 7 columna 3</article>

    <article class="item_cuadricula_22">fila 8 columna 1</article>
    <article class="item_cuadricula_23">fila 8 columna 2</article>
    <article class="item_cuadricula_24">fila 8 columna 3</article>

    <article class="item_cuadricula_25">fila 9 columna 1</article>
    <article class="item_cuadricula_26">fila 9 columna 2</article>
    <article class="item_cuadricula_27">fila 9 columna 3</article>


</section>

Answer 1

在这种情况下，您不应指定grid-row和grid-column，因为它们只是一个接一个地移动。
制作def generator (x: Country): List[File] = List( ("Vendor", x.vendor), ("InstallationType", x.installationType) ).map((generateADT _).tupled) def generateADT (base: String, d: Descriptor): File = { // ... // The path really does not matter, as long as it is inside the src_managed folder. val adtFile = (sourceManaged in Compile).value / s"${base}.scala" IO.writeLines(adtFile, code) adtFile } 时，它会将所有网格元素排列在每行3列中。
而且您不必指定行模板，因为只要使用列模板有足够的元素，网格就会一直存在。
然后，您应该找到开始破裂的屏幕宽度，然后将grid-column-template从1fr 1fr 1fr更改为1fr 1fr（或类似值）。
如果要将图像用作#cuadricula背景，则不应在HTML中添加新的grid-template-columns: 1fr 1fr 1fr，而应将图像作为元素的背景图像。

因此，如果您这样编写css，则代码应具有响应能力：

<img>