css - 使用可变数量的单元格创建固定大小的网格

Question

我正在尝试创建一个包含在 960x960 像素容器中的最大 64x64 的网格。不幸的是，我不确定具体如何实现。我试过基于百分比来做，但后来我的细胞完全消失了。谁能给我任何见解？

.square 
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    height: 1.67%;  // I have no idea what I'm doing here
    max-height: 6.25%;
    width: 1.67%;
    max-width: 6.25%;

    background-color: white;
}

#container
{
    width: 960px;
    height: 960px;

    display: inline-block;
}

Answer 1

有几种方法可以根据您要查找的内容来执行此操作，但这是一种解决方案:Fiddle

#container {
    width: 100%;
    height: 100%;
    max-height: 480px;
    max-width: 480px;
    background: red;
}

.square {
    height: 100%;
    width: 100%;
    max-width: 64px;
    max-height: 64px;
    display: inline-block;
    /* or use float: left; */
    background: yellow;
}

这是一个完全响应的版本:Fiddle2

#container {
    width: 100%;
    height: 100%;
    max-height: 480px;
    max-width: 480px;
    background: red;
}

.square {
    padding-bottom: 19%;
    width: 19%;
    display: inline-block;
    /* or use float: left; */
    background: yellow;
}