CSS сетка динамическое число столбцов возможно? - PullRequest
Новая
       7

CSS сетка динамическое число столбцов возможно?

0 голосов
/ 07 мая 2018

У меня есть настройка веб-страницы, которая использует сетку 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% каждый. (не изменяя CSS через PHP) Если я просто добавлю другой раздел, он будет отображаться сверху или снизу первого.

Я уже пытался использовать grid-auto-columns, а также установить grid-template-rows на 100%, но оба не работали, как ожидалось.

Есть идеи, как решить эту проблему?

1 Ответ

0 голосов
/ 08 мая 2018

Я не совсем уверен, что вы ищете, но это даст вам бок о бок, 

<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

Уродливо в ручке, но он делает то, что вы просили.

...