'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>
htmlcsscss-grid


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Paulie_D

Related Questions