0

Please see the snippet below. By using a big text size, you can see that it will overflow the columns in small screens. I can't get why... Shouldn't auto-fill/fit algorithms take it into account while sizing columns and make them flow on the following row?

Please note: I am not looking for font-size auto-scaling here. My problem here is grid columns are not auto sizing and auto flowing accordingly. Also, if you want to understand the issue, you must see the example on small screens.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .5em;
  padding: 0;
  list-style: none;
}

li a {
  display: block;
  text-align: center;
  padding: 10px;
  background-color: red;
  color: #fff;
  text-decoration: none;
  font-size: 29px;
}
<ul class="year-archives custom">
  <li>
    <a href="#" title="Archivio 2022" class="active">2022/23</a>
  </li>
  <li>
    <a href="#" title="Archivio 2021">2021/22</a>
  </li>
  <li>
    <a href="#" title="Archivio 2020">2020/21</a>
  </li>
  <li>
    <a href="#" title="Archivio 2019">2019/20</a>
  </li>
  <li>
    <a href="#" title="Archivio 2018">2018/19</a>
  </li>
  <li>
    <a href="#" title="Archivio 2017">2017/18</a>
  </li>
</ul>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118
  • You set an explicit text-size. Why would you expect it to change based on the width of the page? – TylerH Dec 30 '22 at 16:39
  • 1
    From looking at the behaviour when it grows and shrinks, it's just calculating where it breaks or how many extra columns to add using minimum value of 84px in the grid-template-columns: property. – Adam Dec 30 '22 at 17:31
  • Adam, I think you (the only one til now) get the point. How to solve? – Luca Reghellin Dec 30 '22 at 17:50
  • 1
    Yep, unfortunately you can't do repeat(auto-fill, minmax(fit-content, 1fr)). Deeply frustrating having had a good 30 minutes looking at this. – Adam Dec 30 '22 at 18:14
  • @Adam: I tried too... Can't understand the reason why it should not working.. – Luca Reghellin Dec 30 '22 at 18:20
  • 1
    I found this answer which basically said intrinsic sizes like fit-content can't be used with auto-fill and auto-fit. Grr! https://stackoverflow.com/a/53725944/12571484 – Adam Dec 30 '22 at 18:23
  • 1
    @Adam: and basically, in this case flexbox should be used instead of grid. Thank you. If you want to add an answer, I'll mark it as accepted. – Luca Reghellin Dec 30 '22 at 18:35
  • 1
    I'm good dude. I'm going to smash some beers to get rid of this grid layout headache. Have a good one – Adam Dec 30 '22 at 18:41

1 Answers1

-2

If the idea is to have the word wrap if it doesn't fit, add this property-value pair to your li a selector:

overflow-wrap: break-word;
TylerH
  • 20,799
  • 66
  • 75
  • 101
pier farrugia
  • 1,520
  • 2
  • 2
  • 9