Auto Grids are automatically responsive grids that don’t require the user to make any breakpoint decisions.
Note: Auto Grids were completely refactored in v3.0.5 to bring major improvements and additional flexibility. You can read more about this refactoring at the end of this doc.
Here are some benefits of Auto Grids in ACSS:
- Lightweight CSS
- No breakpoint decisions
- Can be reactive to the specific type of content in the grid by adjusting var(–min)
- Can be applied to a custom class with a mixin: @include auto-grid($col-count, $min-item-width);
- Can be applied to a custom class with a recipe: @auto-grid;
Downsides of Auto Grids:
- They commonly produce an uneven number of children in the final row as items stack
- Using column and row spans isn’t practical.
Remember, none of the grid systems in ACSS are perfect for every scenario. We give you multiple different types of grid systems so you can choose the most appropriate system for each situation.
Turning on Auto Grids
Auto Grid can be turned on in the options panel under Utility Classes. Once activated, you’ll see an Auto Grid area in the Layout panel:
How to Apply Auto Grid With Classes
Auto Grid has utility-class support for up to 12 columns as well as support for what we call “ratio grids.”
.grid--auto-2.grid--auto-3.grid--auto-4.grid--auto-5.grid--auto-6.grid--auto-7.grid--auto-8.grid--auto-9.grid--auto-10.grid--auto-11.grid--auto-12.grid--auto-1-2.grid--auto-2-1.grid--auto-2-3.grid--auto-3-2.grid--auto-1-3.grid--auto-3-1
Auto-Grid Stacking Aggressiveness
By default, Auto Grids use a math formula to figure out when grid items should stack. This math formula has a user-adjustable control that we call “Aggressiveness.”
This setting controls the default aggressiveness of *all* Auto Grids across the site. If you want items to have more sizing leeway prior to stacking, use a lower number. If you want items to have less sizing leeway and stack sooner, use a higher number.
The acceptable value is a decimal from 0 to 1.
Remember, this is only the default. You can control the exact stacking behavior of individual Auto Grids using the --min control…
Minimum Item Width
Auto Grids work by setting a minimum item width on the items in the grid. As the device size gets narrower, the Auto Grid responds by moving items to new rows once they reach their minimum allowed width.
You don’t have to set a minimum width value since one is already set for you. But, a great feature of auto grids is that you can control this minimum width value if desired, which means you can make the responsiveness of the grid perfectly match the requirements of the content inside it.
Let’s say you have a testimonial card and you want to put a lot of them in a 3-column grid. Based on the design of the card, it starts looking too squished if its width goes below 280px.
Start by applying .grid--auto-3 to the parent container of the cards to establish the 3-column Auto Grid. Now, for this particular grid, go to the ID level and add some custom CSS:
%root% {
--min: 280px;
}
Code language: CSS (css)Now your auto grid will start stacking your testimonial cards as soon as they hit 280px in width. Instead of having to worry about breakpoints, which are disconnected from your content, Auto Grid makes responsiveness content-based.
How to Apply Auto Grid With Variables
Auto grids (1-12) can be applied with variables as well. This lets you use Auto Grid with custom BEM classes.
Set a box to display grid and then use one of the Auto Grid variables in the grid-template-columns property:
.your-selector {
display: grid;
grid-template-columns: var(--grid-auto-4);
}
Code language: CSS (css)Note: Due to variable encapsulation, this is the most limited way to use auto grids. The var(–min) control for setting the minimum width value of items in the grid is not compatible with Auto Grid variables. You should only use this method if you’re okay with the default stacking behavior of the Auto Grid. If more control is needed, use the Mixin method or Recipe method below.
How to Apply Auto Grid With a Mixin
If you need to apply Auto Grid to a custom selector, you can easily do this with a mixin via the “Custom SCSS” area of the ACSS dashboard, like this:
.your-selector {
@include auto-grid(3);
}
Code language: PHP (php)In the above example, “3” is the number of desired columns. Any number from 2 to 12 is supported.
Additionally, you can override the minimum item width of the auto grid by adding a second value, like this:
.your-selector {
@include auto-grid(3, 150px);
}
Code language: PHP (php)Now, you’ll have a 3 column Auto Grid where the items stack when their width goes below 150px.
How to Apply Auto Grid With a Recipe
Auto Grid is also compatible with our recipes feature. This allows you to apply Auto Grid to a custom class using vanilla CSS.
Select the element you want to turn into an auto grid, add a custom class, and then go to the custom CSS area of the style panel.
You can trigger the Auto Grid recipe by typing @auto-grid;
The column count and minimum item width are both editable in the recipe.
Auto Ratio Grids
Ratio Grids are grids with uneven columns. The following ratios are available for Auto Ratio Grids:
.grid--auto-1-2.grid--auto-2-1.grid--auto-2-3.grid--auto-3-2.grid--auto-1-3.grid--auto-3-1
These are not true Auto Grids in the sense that they don’t use the exact same logic as Auto Grids. They are, however, automatically responsive.
Auto Ratio Grids use a traditional grid structure to create the desired ratio, and then automatically stack at a specific breakpoint. The default stacking breakpoint is the “L” breakpoint, but you can change this if needed in the Layout panel by editing the “Ratio Breakpoint” field.
v3.0.5 Refactoring
Auto Grids were completely refactored in v3.0.5. This refactoring comes with many advantages:
- The old Auto Grid method was tied to content width and sometimes (rarely) produced the wrong number of columns depending on how the auto grid was being used. This is no longer the case.
- The old Auto Grid method couldn’t be used on containers narrower than column width. This is no longer the case.
- The old Auto Grids only supported up to 6 columns. The new Auto Grid supports up to 12.
- The new Auto Grid is much more efficient, with less code repetition. The entire system for full 12-column support is less than 50 lines of CSS.
- Auto Grid now lives behind a toggle switch, so you can turn it off if you don’t want it. The old system was packaged with traditional grid, so you were required to load it.
- The new Auto Grids allow you to control minimum item width on the fly for unprecedented accuracy in responsiveness.
- The new Auto Grids have better compatibility with gap classes.
- The new Auto Grids support mixins.
- The new Auto Grids support recipes.
- The new Auto Grids allow you to choose which breakpoint the “auto ratio grids” stack at.
Nothing should change for users who already deployed the old version of auto grid, but you should double check any Auto Grid instances to verify.