全屏3x3 CSS网格

Question

我需要一个关于如何创建全屏3x3 CSS网格的好例子。 环绕的瓷砖应具有固定的高度/宽度，而中间的瓷砖应具有屏幕宽度/高度的其余部分。

我在网上搜索了一些例子，但还没有发现一个很好的例子。

Answer 1

使用display：table可轻松完成3x3网格

<style type="text/css">
    html, body {
        padding: 0;
        margin: 0;
    }
    .grid3x3 {
        display:table;
        height:100%;
        width:100%;
    }
    .grid3x3 > div {
        display:table-row;
        width:100%;
    }
    .grid3x3 > div:first-child,
    .grid3x3 > div:last-child {
        height: 100px;
    }
    .grid3x3 > div > div {
        display:table-cell;
    }
    .grid3x3 > div > div:first-child,
    .grid3x3 > div > div:last-child {
        width:100px;
    }

    div {
        outline: 1px solid orange;
    }

</style>
<div class="grid3x3">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</div>