Bricklayer Column Sizer is the backbone of responsiveness of Bricklayer, which is a key feature.

Column sizer is a virtual element you do not see in the screen. It's technically not virtual but semantically is. Bricklayer uses it to calculate column sizes.

Let's talk about an example:

.bricklayer {
  width: 500px;
}

.bricklayer-column-sizer {
  width: 100px;
}

It says, .bricklayer is 500px width, and .bricklayer-column-sizer is 100px width.

Bricklayer applies complex algorithms to calculate how many 100px'es exists in 500px, and finds 5 as the result.

This is how the algorithm works:

500 / 100 = 5 // Bricklayer will be 5 columns. 

The example above is not the case we recommend. Bricklayer is intended to use .bricklayer-column-sizer with media queries

Let's add some media queries:

.bricklayer {
  width: 500px;
}

@media screen and (min-width: 768px) {
  .bricklayer-column-sizer {
    width: 100px;
  }
}

Now, we wrapped .bricklayer-column-sizer with @media query. But this layout will jump when breakpoint changes. It means the layout is not fluid.

Giving a percentage value will make the column fluid.

.bricklayer {
  width: 500px;
}

@media screen and (min-width: 768px) {
  .bricklayer-column-sizer {
    /* Each column will be 100px width and there will be 5 columns. */
    width: 20%;
  }
}

/* You should add more media queries to make it fully responsive. */

@media screen and (min-width: 768px) {
  .bricklayer-column-sizer {
    /* Each column will be 125px width and there will be 4 columns. */
    width: 25%;
  }
}