CSS Grid: Defining a Maximum Number of Columns Without Media Queries

Question:

Can we specify a CSS grid with a maximum number of columns, while allowing elements to dynamically wrap onto new rows as the screen width changes?

Answer:

Yes, using CSS Grid, we can achieve this without the use of JavaScript or media queries. This approach utilizes the concept of auto-fit columns:

Solution:

1. Create a grid container with the display: grid property.
2. Set the grid-template-columns property using the repeat() function with auto-fit as the repeat type.
3. Within auto-fit, use minmax(max(width, 100%/N), 1fr) to specify the column behavior.

Explanation:

• max(width, 100%/N) ensures that the column width will be either the maximum width or a fraction (100%/N) of the container width.
• 1fr sets the default column width to be 1 fraction of the remaining space.

As a result, when the container width is increased, the columns will expand to fit the available space within the defined maximum number of columns. Elements will automatically wrap to new rows as necessary.

Code Snippet:

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

Example:

In the following example, a grid container is created with a maximum of 4 columns, and the elements wrap accordingly:

<div>

With this approach, we can define a maximum number of columns in a CSS grid, allowing elements to wrap onto new rows as the screen width changes, without the need for media queries.