CODEWITHSUNDEEP
htmlcsscss-grid
Anthony Russo
Anthony Russo

Reputation: 931

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>

Upvotes: 1

Views: 234

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

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>

Upvotes: 3

Related Questions