Geek Answers Handbook

How to stop css grid columns from growing using minmax ()?

I work with CSS grids to create a grid layout.

But I don’t quite know how to set up the instruction minmax()to handle use cases when there are not enough elements to fill the line, but still they need to look like maps!

If I replace the value of max 1fr with a static 100px, or I use a fractional 0.25fr, it frustrates the scaling with smaller media sizes.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 17px;
  grid-row-gap: 25.5px;
  padding-bottom: 25.5px;
}
.card {
  background-color: #000;
  height: 100px;
}
<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
Run codeHide result

And then if there is only a couple of elements

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 17px;
  grid-row-gap: 25.5px;
  padding-bottom: 25.5px;
}
.card {
  background-color: #000;
  height: 100px;
}
<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
</div>
Run codeHide result
+2
source share
1 answer

The key is to use auto-fillinstead auto-fit.

repeat() auto-fit auto-fill, (/) .

( , , , . . . , .)

auto-fit, , .

, , . , , , . , , .

auto-fill , auto-fit, , . . , , .

auto-fill auto-fit.

: https://www.w3.org/TR/css3-grid-layout/#auto-repeat

:

+4

More articles:


All Articles