Auto Responsive Grids in Bricks

This tutorial provides the CSS that can be pasted for automatic responsive grids in Bricks Builder.

Posts element

Each post will get a right padding (30px by default) in the default Grid layout but the space to the right for posts in the last column is undesirable.

Here’s the fix. Add the following at STYLE → CSS → Custom CSS:

root .bricks-layout-wrapper {
	margin-right: 0;
	margin-bottom: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}

root .bricks-layout-item {
	width: auto;
	padding-right: 0;
	padding-bottom: 0;
}

We are changing the display of the posts’ wrapper from flex to grid and setting the column width to be a minimum of 300px (you can change this to your liking) and a maximum of 1 fraction of the available width.

If you wish to have more control (being able to specify the columns at different breakpoints) and use a manual CSS Grid, we covered that in the CSS Grid for Posts Element in Bricks tutorial.

Query Loop

If you have enabled the query loop on a Container/Block/Div element, here’s the equivalent CSS to be added to the parent of the element for which query loop is applied:

root {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}