I was working on a grid system in CSS for a style framework I’m making for work, and I ran into a few problems when styling the grid. Specifically, I was having trouble with aligning all of the columns side-by-side while simultaneously giving each column sufficient padding. There is a CSS property called
box-sizing, which has a default value of
content-box. The problem with this is that for block elements such as
divs, properties like borders and padding add width to the element, even if it already has a fixed width. This is particularly troublesome with grids, because we need to have each column the correct width regardless of padding applied to it.
Thankfully, there is another value that can be used for the
box-sizing property called
border-box, which ensures the element that it is applied to stays the same width, regardless of any padding or borders applied to it. Chris Coyier has a great article on how this box model applies to grids:
And Paul Irish also has an in-depth explanation about the box model and the usage border-box. The article is a great read and lists the pros of using this property: