How can I force this CSS grid to wrap to a new line without specifying minmax sizes?

by

I don’t see how this is possible with the current iteration of CSS Grid.

As you’ve already discovered, you would at least need to define a fixed minimum width on the columns, in order to force a wrap at some point.

Unfortunately, with automatic repetitions, the minimum length cannot be auto, min-content or max-content alone, because that is forbidden in the specification.

Here’s as close as you can get with Grid, as far as I can tell:

.btn-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, max-content));
  width: 20rem;
}

/* original demo styles */
.btn {
  font-family: "Arial", sans-serif;
  border-bottom: 4px solid #77aaee;
  color: #77aaee;
  padding: .6rem;
  text-decoration: none;
}
<div class="btn-tabs">
  <a class="btn" href="#">Button 1</a>
  <a class="btn" href="#">Button 2</a>
  <a class="btn" href="#">Button 3</a>
  <a class="btn" href="#">Button 4</a>
  <a class="btn" href="#">Button 5</a>
  <a class="btn" href="#">Button 6</a>
</div>

Flexbox may be a good alternative, as it seems to work with your requirements:

.btn-tabs {
  display: flex;
  flex-wrap: wrap;
  width: 20rem;
}

/* original demo styles */
/* notice no width defined on flex items, but they wrap anyway */
.btn {
  font-family: "Arial", sans-serif;
  border-bottom: 4px solid #77aaee;
  color: #77aaee;
  padding: .6rem;
  text-decoration: none;
}
<div class="btn-tabs">
  <a class="btn" href="#">Button 1</a>
  <a class="btn" href="#">Button 2</a>
  <a class="btn" href="#">Button 3</a>
  <a class="btn" href="#">Button 4</a>
  <a class="btn" href="#">Button 5</a>
  <a class="btn" href="#">Button 6</a>
</div>

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Why aren’t my grid-template-areas with ASCII art not working?
  4. Aligning grid items across the entire row/column (like flex items can)
  5. What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS
  6. Position deeply nested elements in a higher level grid container
  7. Align child elements of different blocks
  8. Browser support for CSS Grid
  9. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  10. Why are CSS named grid areas not in quotes?
  11. What is the difference between auto-fill and auto-fit?
  12. wordwrap a very long string
  13. A grid layout with responsive squares
  14. Create a Masonry grid with flexbox (or other CSS)
  15. Why percentage value within grid-gap create overflow in CSS grid?
  16. Using CSS transitions in CSS Grid Layout
  17. CSS Grid – Auto height rows, sizing to content
  18. How to make a column span full width when a second column is not there? (CSS Grid)
  19. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  20. Percentage padding / margin on grid item ignored in Firefox
  21. CSS Grid auto fit with max-content
  22. Using “word-wrap: break-word” within a table [duplicate]
  23. How do you collapse unused row in a CSS grid?
  24. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  25. Is a button allowed to have display:grid? [duplicate]
  26. grid-area does not seem to work with the attr function, is this by design?
  27. How to center content and make the background cover the full column when using CSS Grid?
  28. CSS word-wrapping in div
  29. Getting columns to wrap in CSS Grid
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment