Skip to main content
Skip to video
Skip to article

How to set up responsive 3 columns layout in Bricks Builder

Bricks, CSS
947 views

How to setup flexbox columns layout in WordPress using Bricks Builder. This very useful if you wish to achieve equal width columns across your breakpoints, but flexible enough to let the columns grow consistently at any breakpoint.

/* add this to the flex basis of the loop item
calc((100% / var(--cols)) - (var(--gap) * (var(--cols) - 1)) / var(--cols)) 
*/

/* add this to the column gap and row gap of the parent container of the loop item
var(--gap)
*/

/* set the parent container flex wrap to 'wrap', and direction to 'Horizontal(row)', stretch*/


/*add this to the custom CSS of parent container of the loop item*/



root {  
  --gap: 2rem;
  --cols: 1; /*mobile*/
}



@media (min-width:581px) { 
root {
    --cols: 2; /*tablet*/
  }
}


@media (min-width:992px) { 
root {
    --cols: 3; /*destop*/
  }
}


Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how Design with Cracka is funded, why it matters, and how you can support us.
Join the Community
Join over 7000 learners and contributors on Design with Cracka community. Don't miss out on the conversations!
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Leave a Reply

Your email address will not be published. Required fields are marked *

dicecartselectearthcrossarrow-rightlayerstext-align-center
0
Would love your thoughts, please comment.x
()
x