One of my favorite new features of Automatic CSS is the variable grid class. This class allows you to specify a minimum width, and the rest of the grid just flows. There’s no need to set columns, rows, or gaps; it’s all done for you. Sometimes, you may need to set this on something that doesn’t have a Bricks interface (e.g., API feed). In this case, here is the CSS you need. Assuming you are using the full width of the container, I have found the easiest calculation is to divide the content width by one more than the number of columns you want — want three columns, divide by four. If you are not using Automatic CSS, you must replace the variables with your own values.
.variable-grid {
--min:calc(var(--content-width) / 5);
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(var(--min, calc(var(--content-width) / 2 - var(--space-xxl))), 100%), 1fr));
grid-template-rows: var(--grid-1);
gap: var(--gap, var(--grid-gap));
}
Leave a Reply