CSS grid minmax() with max-width of 100%

问题

This code uses CSS grid with minmax(30rem, 1fr).

grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));

Everything works fine, but when the ~~viewport~~ parent container gets smaller than 30rem, a horizontal scrollbar appears. I would need something like minmax(min(30rem, 100%), 1fr)). Any idea how to achieve that?

https://codepen.io/anon/pen/LmEyer

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 10px;
}

li {
  background-color: #aaa;
  padding: 0.5rem;
}

<ul class="list">
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
<ul>

回答1:

Sounds like you have a breakpoint when the screen width is 30rem. That calls for a media query.

Add this to your code:

@media (max-width: 30rem) {
   ul { grid-template-columns: 1fr; }
}

revised codepen

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 10px;
}

li {
  background-color: #aaa;
  padding: 0.5rem;
}

@media (max-width: 30rem) {
  ul {
    grid-template-columns: 1fr;
  }
}

<ul class="list">
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
<ul>

来源：https://stackoverflow.com/questions/49919572/css-grid-minmax-with-max-width-of-100

标签

html

css

css3

css-grid