Search code examples
cssflexboxcss-grid

CSS grid with flex basis?

Current I'm doing

grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

But I want that when the view port is less than 400px the container should resize to the view port... Or how do I implement Flex-basis property to grid... Where the minimum should be 0px but the container should start at 400px and then grow to 1fr

Solution

  • You can combine what you have with min() and 100vw. Less than 100vw to avoid unwanted overflow and the 1fr will do its job filling the remaining space. Any value bigger than 50vw will do the job

    .container {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(400px,80vw), 1fr));
  grid-gap:10px;
}

.container div {
  height:50px;
  background:red;
}

body {
  margin:0;
}
    <div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>