html - 我如何使网格响应？

Question

我正在做一个css 网格设计，它在桌面 View 上运行良好。 ¿如何让它响应？

我构建了一个带有背景图像的部分，稍后我添加了几篇文章以在图像上显示网格。就像我说的，在桌面上运行良好，但在响应式中看起来不太好。

我想知道如何让它响应。

非常感谢

这是我的 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，因为它们只是一个接一个地排列。
当你制作 grid-template-columns: 1fr 1fr 1fr它将所有网格元素排列在每一行的 3 列中。
而且您不必指定行模板，因为只要有足够的元素使用列模板，网格就会继续。
然后你应该找到它开始分崩离析的屏幕宽度，并将 grid-column-template 从 1fr 1fr 1fr 更改为 1fr 1fr (或类似的)。
如果您希望图像成为您的#cuadricula 背景，则不应添加新的 <img>在 HTML 中，但将图像设为元素的背景图像。

因此，如果您像这样编写 CSS，您的代码应该会响应:

#cuadricula {
        width: 600px;
        height: 900px;
        display: grid;
        grid-template-columns: auto auto auto;  
        background: #c51162;
        border: 1px solid #FFF;
        overflow: hidden;
        background-image: url('http://images.fastcompany.com/upload/Simple.jpg');
        background-size: cover;
    }
    .item_cuadricula_1 {
        background: rgba(253, 85, 143, 0.60);
    }
     @media only screen and (max-width: 650px) {
        #cuadricula {
            grid-template-columns: 1fr 1fr;
            width: 100%;
        }