Question

我在理解如何根据媒体尺寸放置元素方面有些困难。例如，在移动设备上，我希望将元素堆叠在编号的同一列中；一篇文章，广告，另一篇文章，然后是文章预告片。

我了解如果元素从网格中的特定行开始（如Mozilla Developer docs），则如何使用CSS网格进行此操作，但演示并未显示实际内容在各节中的显示方式当我需要内容从文档顶部流淌时。

我可能期望过高，但是使用CSS网格有可能吗？过去，我可以使用React来做到这一点，但是在条件渲染和窗口宽度查询中却很难做到。

        html,body {
            height: 100%;
            margin: 0;
        }

        .sm-hide {
            /* these eleements aren't shown in our mobile-first layout */
            display: none;
        }

        .article {
            background-color: beige;
            margin: 5px;
            height: 285px;
        }

        .ad {
            background-color: beige;
            margin: 5px;
            height: 100px;
        }

        .more {
            background-color: beige;
            margin: 5px;
            height: 300px;
        }

        aside {
            background-color: lightblue;
            /* name the area */
            grid-area: aside;
        }

        main {
            background-color: lightseagreen;
            grid-area: main;
        }

        footer {
            background-color: lightcoral;
            grid-area: footer;
        }

        wrapper {
            /* set up the grid */
            display: grid;
            height: 100%;
            /* specify a static value and use fractional units to take the remainder */
            grid-template-rows: 1fr 50px;
            /* the 1fr is assumed and is not necessary, but for demo */
            grid-template-columns: 1fr;
            /* specify what element gets each grid area */
            grid-template-areas: "main" "footer";
        }

        @media (min-width: 600px) {
            .sm-hide {
                /* show the elements on larger displays */
                display: initial;
            }
            wrapper {
                grid-template-columns: 2fr 1fr;
                grid-template-areas: "main aside" "footer footer";
            }
        }

    <wrapper>
        <aside class="sm-hide">aside
            <div class="ad">
                ad 2
            </div>
            <div class="more">
                article teasers 4
            </div>
        </aside>
        <main>main
            <div class="article">
                article 1
            </div>
            <div class="article">
                article 3
            </div>
        </main>
        <footer>footer</footer>
    </wrapper>

Answer 1

首先，您缺少视口。您可能会在完整的html中找到它。

我的“解决方案”有效（有点），但是我会考虑以不使用包装的方式来重组html标记。

除了使用<article>之外，我还将使用aside.ad和aside.more摆脱封装。在网格中效果更好。

如果有任何不清楚的地方，随时问更多。

html,
body {
  height: 100%;
  margin: 0;
}

article {
  background-color: beige;
  margin: 5px;
  height: 285px;
}

.ad {
  background-color: beige;
  margin: 5px;
  height: 100px;
}

.more {
  background-color: beige;
  margin: 5px;
  height: 300px;
}

aside {
  background-color: lightblue;
  display: contents;
}

.ad {
  grid-area: ad;
}

.more {
  grid-area: more;
}

main {
  background-color: lightseagreen;
  display: contents;
}

main article:nth-child(1) {
  grid-area: first-article
}

main article:nth-child(2) {
  grid-area: second-article
}

footer {
  background-color: lightcoral;
  grid-area: footer;
}

wrapper {
  /* set up the grid */
  display: grid;
  height: 100%;
  /* specify a static value and use fractional units to take the remainder */
  grid-template-rows: 1fr auto 50px;
  /* the 1fr is assumed and is not necessary, but for demo */
  grid-template-columns: 1fr;
  /* specify what element gets each grid area */
  grid-template-areas: "first-article" "ad" "second-article" "more" "footer";
}

@media (min-width: 600px) {
  wrapper {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "main aside" "footer footer";
  }
  aside {
    /* name the area */
    grid-area: aside;
  }
  main {
    grid-area: main;
  }
  main,
  aside {
    display: block;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<wrapper>
  <aside class="sm-hide">aside
    <div class="ad">
      ad 2
    </div>
    <div class="more">
      article teasers 4
    </div>
  </aside>
  <main>main
    <article>
      article 1
    </article>
    <article>
      article 3
    </article>
  </main>
  <footer>footer</footer>
</wrapper>

Answer 2

秘密成分是Domenik建议的display: contents，并在Mozilla Developer docs中进行了解释。

        * {
            margin: 5px;
            padding: 5px;
        }

        body {
            display: grid;
            grid-template-areas: "as1" "ad" "as2" "tsr";
        }

        /* this is key to reordering the elements */
        main,
        aside {
            display: contents;
        }


        main {
            background-color: darkslateblue;
        }

        aside {
            background-color: darkgreen;
        }

        .teasers {
            background-color: blanchedalmond;
            min-height: 200px;
            grid-area: tsr;
        }

        .as1 {
            background-color: antiquewhite;
            grid-area: as1;
            min-height: 300px;
        }

        .as2 {
            background-color: antiquewhite;
            grid-area: as2;
            min-height: 250px;
        }

        .ad {
            background-color: aqua;
            grid-area: ad;
        }

        @media (min-width: 400px) {
            body {
                grid-template-columns: 2fr 1fr;
                grid-template-areas: "as1 ad" "as2 tsr";
            }
            main,
            aside {
                display: initial;
            }
        }

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title of the document</title>
</head>

<body>
    <main>
        <section class="as1">
            first article space
        </section>
        <section class="as2">
            second article space
        </section>
    </main>
    <aside>
        <div class="ad">
            ad space
        </div>
        <section class="teasers">
            more stuff
        </section>
    </aside>

    <script></script>
</body>

</html>

如何创建自适应的流畅CSS网格

2 个答案: