How to make a CSS grid collapse without defining a column width

Question

I have this layout:

Basically the HTML and CSS is the following:

<style>
  section { display: grid, grid-template-columns: repeat(3, 1fr) };
  div::first-child: { grid-column: 1/3}
</style>
<section>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</section>

when the viewport becomes smaller, I want the grid to have 2 columns and then 1 column. I could use media-queries and redefine the number of columns but I'm wondering if there's an easy way to do that using auto-fill function?

This answer shows how to do it by defining the width of the columns, but ideally I wouldn't want to do that and have the width based on the available space for the number of columns.

Unfortunately, CSS-Grid does not have this as an option other than the link you already have. — Paulie_D, Jan 09 '20 at 16:04
@Paulie_D, I see, thanks. So is it correct to conclude that the number of columns in CSS grid should always be defined by `grid-template-columns` using either explicit number of auto-fill with a specified column width? Or can the number of columns also be defined by the content width? — Max Koretskyi, Jan 09 '20 at 16:24

score 0 · Answer 1 · edited Dec 24 '21 at 01:33

0

This little tidbit works pretty well. You have to have a min-width, and that controls the breakpoints. We generally set this to be approx 100% (less margins) of a mobile viewport screen-ish.

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

edited Dec 24 '21 at 01:33

Henry Ecker

34,399
18
41
57

answered Dec 23 '21 at 21:28

Earl Jessee

1

How to make a CSS grid collapse without defining a column width

1 Answers1