CODEWITHSUNDEEP
csscss-grid
hemoglobin
hemoglobin

Reputation: 841

CSS grid doesn't stretch to 100% on smaller screens

I have a page layout with two columns: a sidebar and the rest of the page content. Sidebar needs to be 300px width, while the rest of the content needs to fill what's left. I've used CSS grid for this and grid-template-columns: 300px auto (and even tried grid-template-columns: 300px 1fr). And it works on bigger screens. But on screens around tablet size, the content doesn't stretch to 100% / doesn't fill what's left. And I'm not sure what's wrong.

Here's my code outline:

.container {
  display: grid;
  grid-template-columns: 300px auto;
}

.sidebar {
  height: 100vh;
  background: green;
}

.content {
  height: 100vh;
  background: gray;
}
<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

Is there something I'm doing wrong and is there a way I could do this differently with CSS grid to avoid this issue? Thanks!

Upvotes: 1

Views: 1992

Answers (3)

Clom
Clom

Reputation: 371

It's a bit late but I think you could try this:

.container {
   display: grid;
   grid-template-columns: 300px minmax(0, 1fr);
}

Upvotes: 2

Joykal Infotech
Joykal Infotech

Reputation: 1876

You can always make use of calc function, by older means of float and setting width. This surely works for all kind of device.

.container {
  display: inline-block;
  width: 100%;
}

.sidebar {
  float: left;
  display: inline-block;
  max-width: 300px;
  width: 100%;
  height: 100vh;
  background: green;
}

.content {
  float: left;
  display: inline-block;
  width: calc(100% - 300px);
  height: 100vh;
  background: gray;
}
<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

Upvotes: 0

Matthew Varga
Matthew Varga

Reputation: 404

the problem is coming from the column width being fixed at 300px. You can use a media query and assign the grid-template-columns to auto at a fixed screen width and below. Example is for any screen size of 600px or less, the width goes to auto taking up the entire screen.

CSS

.container {
  display: grid;
  grid-template-columns: 300px auto;
}

.sidebar {
  height: 100vh;
  background: green;
}

.content {
  height: 100vh;
  background: gray;
}

@media only screen and (max-width: 600px) {
  .container {
    grid-template-columns: auto;
  }
}

https://jsfiddle.net/dxefc73o/

Upvotes: -1

Related Questions