【问题标题】：use inline-block or table-cell for css grid对 CSS 网格使用 inline-block 或 table-cell
【发布时间】：2012-08-10 20:43:29
【问题描述】：
我正在研究为仅限 webkit 的浏览器创建一组 CSS 网格类。应该类似于 blueprit/bootstrap/compass，但是我宁愿不使用它们，因为它们依赖于浮动定位。
我想要这样的东西：
span-1 {width:10%;display:inline-block}
span-2 {width:20%;display:inline-block}
等等。使用 display:table-cell vs inline-block 会有什么好处吗？还是有更好的方法？
【问题讨论】：
标签：
css
web-applications
grid
frontend
【解决方案1】：
实际上display: table 确实是您可能正在寻找的解决方案（因为您的目标浏览器）。它被添加到浏览器中，因此人们无需使用表格即可获得网格布局。您甚至不需要百分比（您添加的列数将决定子元素的宽度）。
DEMO
当您使用移动浏览器并希望动态布局转换（媒体标签）从水平列表变为垂直列表时，唯一真正需要注意的是。我想添加你自己的媒体标签（并向包装器添加一个类）并不是什么大不了的事......
您可能可以让display: inline-block 工作，但请确保使用box-sizing: border-box，因为当您使用百分比时，即使关闭一个像素，事情也会开始环绕..