Search code examples
csscss-grid

CSS - Grid Causing Overflow

I'm trying to make a 2-column website using the CSS grid functionality. I'm also trying to make it mobile friendly.

What I have works, but it's causing an overflow on small devices:

<style>
#wrapper {
	display: grid;
	grid-template-columns: minmax(275px, 25%) 75%;
}
</style>

<div id="wrapper">
   <div>One</div>
   <div>Two</div>
</div>

I want the first column (the menu) to be limited to a minwidth of 275px, with a width of 25%, and the second column can take the full page (which I tried using 75%).

Somehow it isn't flexible to adjust itself to the window.

How can I make it so there isn't an overflow happening?

Solution

  • Use 1fr instead of 75%.

    fr is a fractional unit and 1fr is for 1 part of the available space.

    <style>
#wrapper {
  display: grid;
  grid-template-columns: minmax(275px, 25%) 1fr;
}
</style>

<div id="wrapper">
   <div>One</div>
   <div>Two</div>
</div>