フルスクリーンの 3x3 CSS グリッドを作成する方法の良い例が必要です。周囲のタイルは固定の高さ/幅を持つ必要がありますが、中央のタイルは画面の残りの幅/高さを持つ必要があります。
Web で例を検索しましたが、まだ良い例に出くわしていません。
フルスクリーンの 3x3 CSS グリッドを作成する方法の良い例が必要です。周囲のタイルは固定の高さ/幅を持つ必要がありますが、中央のタイルは画面の残りの幅/高さを持つ必要があります。
Web で例を検索しましたが、まだ良い例に出くわしていません。
3x3グリッドはdisplay:tableで簡単に実行できます
<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>