css - 全屏 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>