0

How can I manually determine how many columns show up in my grid with these rules?

display: grid;
grid-column-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

For example, in my project the container <div> is 1463px. This results in 5 columns, each child having a width of 279.8px. Knowing my container width and the grid-template-columns rule, how can I calculate number of columns?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
smilebomb
  • 5,123
  • 8
  • 49
  • 81
  • Auto-fill FILLS the row with as many columns as it can fit based on the available width. https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ – Paulie_D Jul 22 '21 at 15:37
  • You can get a rough idea based on "width / min" and take the integer. Unfortunately, the `gap` tends to complicate the issue but unless it's an extreme case, the integer should give you the number of columns expected. – Paulie_D Jul 22 '21 at 15:48

0 Answers0