Set column to different span dynamically using CSS grid

Question

I have this layout with 4 elements in a 12 column CSS grid. The #content div (the one with the gray background) is set to grid-column: span 9; as you can see in the example, while the aside (skyblue background) is set to grid-column: span 3;.

This is fine except that the aside will not always be present (the site admin can enable/disable the aside from the back end). If the aside is disabled, is it possible to set the #content div to span all 12 columns without giving the content element extra class names?

I tried grid-column: auto; but this only made the content span 1 column...

I know this can be done by giving the #content div a special class depending on if the aside is there or not (handled by PHP), but is there a way to do this with just the grid?

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  display: grid;
  min-height: 100%;
  /* grid-template-columns: repeat(12, 1fr); */
  grid-template-columns: auto;
  grid-template-rows: 70px auto 70px;
  background: #1a1a1a;
  color: white;
}

header {
  background: #00fc50;
  color: black;
  height: 30px;
  font-weight: bold;
  font-size: 30px;
  padding: 20px;
  grid-column: span 12;
  grid-row: span 1;
}

main {
  display: grid;
  grid-column: span 12;
  grid-template-columns: repeat(12, 1fr);
}

#content {
  grid-column: span 9;
  font-size: 20px;
  line-height: 1.5em;
  padding: 30px;
  color: skyblue;
}

aside {
  /*   display: none; */
  background: skyblue;
  color: black;
  grid-column: span 3;
  padding: 30px;
  font-size: 20px;
}

footer {
  color: black;
  background: purple;
  height: 30px;
  font-weight: bold;
  font-size: 30px;
  padding: 20px;
  grid-column: span 12;
}

<header>
  <div>Some stuff here.</div>
</header>

<main>
  <div id="content">
    This is the content area... Should asides be in a main tag?
  </div>

  <aside id="sidebar">
    This is the sidebar
  </aside>
</main>

<footer>
  Guess who! It's the footer!
</footer>

Set column to different span dynamically using CSS grid

0 Answers0