全屏3x3 CSS網格

Question

我需要一個很好的例子來說明如何創建一個全屏3x3 CSS網格。 地磚應該有一個固定的高度/寬度，而中間瓷磚應該有屏幕寬度/高度的其餘部分。

我已經在網上搜索了一些例子，但還沒有偶然發現一個很好的例子。

Answer 1

一個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>