How to Define a Maximum Column Count in CSS Grid Without Media Queries?

CSS Grid: Defining Maximum Column Count Without Media Queries

In CSS grid, you can specify a maximum number of columns for a grid while allowing elements to wrap onto new rows as the screen width changes. To achieve this, consider using the max(width, 100%/N) function, where N represents the maximum number of columns.

The max function ensures that if the container's width increases, 100%/N will always be greater than width. This ensures that there will never be more than N elements per row.

Here's an example:

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

.grid-item {
  /* Styling for grid items */
}

In this example, the maximum number of columns is set to 4 using the --n custom property. The grid-template-columns property uses auto-fill to create columns and applies the max function to ensure the specified maximum column count.

You can adjust the --n value to change the maximum number of columns as needed. This provides a generic solution to your requirement without relying on JavaScript or media queries.

The above is the detailed content of How to Define a Maximum Column Count in CSS Grid Without Media Queries?. For more information, please follow other related articles on the PHP Chinese website!