Building a grid framework with inline-block's

为君一笑 提交于 2019-12-02 13:24:23

InuitCSS (my choice of framework lately) uses a similar system. As wonderful as the use of display: inline-block; is in a grid system, it does appear that the whitespace issue, is an inherent one; with little chance of resolution beyond the current workarounds.

I agree that the use of comments or closing tags does introduce some issues with CMS entries, and a certain amount of mental overhead for the developers involved; but not an unmanageable amount.

If you want to have a look at Inuit's grids I would recommend it's GitHub found here: https://github.com/inuitcss

I would also advise reading this issue, in-which Inuit's creator; Harry Roberts, weighs in on the various solutions this problem. Whilst it may not tell you anything you don't already know, it is an interesting (if outdated) discussion on the matter.

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

I know that the above may not solve your issue, or even shed any light on the matter, but I hope it can be of use.

Using a float is your best option.

.parent div {
    float: left;
}

Following your comments below you could use a negative margin.

.parent div {
    margin-left: -4px;
}

But this may change browser to browser.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!