Question

我有一个网页设置，它使用css网格显示以80％宽度为中心的主要部分。

<html>
....

<body>
  <main>
    <section>
    </section>
  </main>
</body>
....

</html>

main {
  display: grid;
  justify-items: center;
}

section {
  max-width: 80%;
  min-height: 100%
}

现在我还希望能够使用PHP if语句添加第二部分，以便两个部分彼此相邻，每个部分显示50％。（而不是通过PHP改变CSS）如果我只是添加另一部分，它将显示在第一部分的顶部或下方。

我已尝试使用grid-auto-columns以及将grid-template-rows设置为100％，但两者都没有按预期工作。

关于如何解决这个问题的任何想法？

Answer 1

我不完全确定你的目标是什么，但这会让你并肩，

<html>

  <body>
    <main>
      <section>
        section1 stuff
      </section>
      <section>
        section2 stuff
      </section>
    </main>
  </body>

</html>

main{
  display: grid;
  grid-template-columns: 100px 200px 300px;
  grid-auto-rows: minmax(100px, auto);
  grid-gap:5px;
}
section{
  max-width: 80%;
  min-height: 100%;
  border:1px solid black;
  background:red;
}

https://codepen.io/anon/pen/ZovaVG

在笔中丑陋，但它完成了你的要求。

CSS网格动态列数可能吗？

1 个答案: