Webflow sync, pageviews & more.
NEW
Answers

Where can I find the "auto-fill" setting in Webflow's UI for CSS grid?

In Webflow's UI, the "auto-fill" setting for CSS grid can be found in the grid-template-columns property.

To access the grid-template-columns property in Webflow, follow these steps:

1. Select the element that has the CSS grid applied to it.
2. In the Style panel on the right-hand side, scroll down to the Layout section.
3. Click on the "grid" dropdown, which is located below the Display property.
4. Once you've selected the "grid" option, you will see a "Template" field appear. Click on the "Columns" input box within the Template field.
5. Here, you can define the column widths of your CSS grid.
6. To use the "auto-fill" setting, simply include the "auto-fill" keyword as one of the values within the grid-template-columns property.

For example, let's say you want to create a grid with three columns that automatically fill the available space:

1fr 1fr auto-fill

In this case, the "1fr 1fr" part creates two fixed-width columns, and the "auto-fill" part allows additional columns to be added dynamically to fill the available space.

By using the "auto-fill" keyword, you can create flexible grid layouts that adjust to the container's width and add or remove columns automatically based on the available space.

Rate this answer

Other Webflow Questions