CODEWITHSUNDEEP
htmlcssgridcss-grid
J. Doe
J. Doe

Reputation: 54

CSS grid dynamic number of columns possible?

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?

Upvotes: 1

Views: 3000

Answers (1)

johnny
johnny

Reputation: 19735

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.

Upvotes: 1

Related Questions