CSS grid dynamic number of columns possible?

Question

i have a web page setup which uses css grid to display the main section centered at 80% width.

<html>
....

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

</html>

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

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

now I would like to also be able to add a second section using a PHP if statement so that both sections are displayed right next to each other at 50% each. (while not altering the css via PHP) If I just add another section it will be displayed on top or below the first one.

I've already tried using grid-auto-columns as well as setting grid-template-rows to 100% but both didn't work as expected.

Any Ideas on how to solve this?

ok thank you that woks well for 100% or 50/50 but not for 80% or 50/50. When I try to set minmax(1fr, 80%) it will not be displayed as expected, again with the "invalid property value". With max-width: 80% there will be two boxes each filling 80% of half of the width — J. Doe
– J. Doe, Commented May 7, 2018 at 12:50

johnny · Accepted Answer · 2018-05-08 14:22:54Z

1

I'm not completely sure what you are after, but this will give you side by side,

<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

Ugly in a Pen, but it does what you asked.

answered May 8, 2018 at 14:22

johnny

19.9k54 gold badges169 silver badges271 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS grid dynamic number of columns possible?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related