Search code examples
htmlcsscss-grid

Dynamically Fill CSS Grid Based on Second Column Percentage Width

I'm using CSS Grid and attempting to create a layout with two columns, one of them will have a percentage width and the other will dynamically fill based on what is set as the percentage width.

Am I over thinking this or is it not possible with CSS Grid? I've done this within Flexbox so I'm not looking for any answers regarding that method.

<div class="grid-row">
  <div class="content">
  Page content here.
  </div>
  <aside class="sidebar">
  Sidebar content here.
  </aside>
</div>
Solution

  • Just use grid-template-columns: X% 1fr

    .grid-row {
  display: grid;
  grid-template-columns: 70% 1fr;
}

* {
  outline:1px solid grey;
}
    <div class="grid-row">
  <div class="content">
  Page content here.
  </div>
  <aside class="sidebar">
  Sidebar content here.
  </aside>
</div>