CSS

Inline-block and white space in the grid

Posted

Searching for a long time and finally found the following:

/**
 * [1] Reset the font-size to the root/default size.
 *     Note: Won't work in IE8 and below
 *     To make it work in IE8 and below just change to "font-size: $my-font-size;".
 */
.grid__item > * {
    font-size: 1rem; /* [1] */
}


/**
 * [1] Font-size 0 removes the white spaces. Won't work on mobiles..
 *     ..because the minimum font-size is 8px.
 */
.grid__item, .grid {
    font-size: 0; /* [1] */
}

ref: https://github.com/csswizardry/inuit.css/issues/170