在網(wǎng)格布局中創(chuàng)建多個網(wǎng)格的單元格

1、在網(wǎng)格布局中創(chuàng)建多個網(wǎng)格的單元格解釋：上面的橙色單元格是grid-column:1/6;grid-row:1/2;左邊的藍(lán)色單元格grid-column:1/3;grid-row:2/4;正確的綠色單元格是grid-column:3/6;grid-row:2/3;左下方的灰色單元格是grid-column:1/3;grid-row:4/5;右下方的黃色單元格是grid-column:3/6;grid-row:3/5;下面的白色單元格是grid-column:1/2;grid-row:5/6;grid-column:2/3;grid-row:5/6;grid-column:3/4;grid-ro

2、w:5/6;grid-column:4/5;grid-row:5/6;grid-column:5/6;grid-row:5/6;下面將上述布局寫入網(wǎng)格單元格的類中。代碼如下編寫以下html，css。simplegrid.html內(nèi)容1內(nèi)容2內(nèi)容3內(nèi)容4內(nèi)容5內(nèi)容6內(nèi)容7內(nèi)容8內(nèi)容9內(nèi)容10simplegrid.css.containerdisplay:grid;grid-template-columns:160px160px160px160px160px;grid-template-rows:120px120px120px120px120px;border:solidff6a001px;.gr

3、iditem1grid-column:1/6;grid-row:1/2;background-color:ff9c9c;.griditem2grid-column:1/3;grid-row:2/4;background-color:ffcb70;.griditem3grid-column:1/3;grid-row:4/5;background-color:7ee68d;.griditem4grid-column:3/6;grid-row:2/3;background-color:7ee6e2;.griditem5grid-column:3/6;grid-row:3/5;background-c

4、olor:95a7f5;.griditem6grid-column:1/2;grid-row:5/6;background-color:d095f5;.griditem7grid-column:2/3;grid-row:5/6;background-color:e1bbfa;.griditem8grid-column:3/4;grid-row:5/6;background-color:d2b1e4;.griditem9grid-column:4/5;grid-row:5/6;background-color:dcd2e1;.griditem10grid-column:5/6;grid-row:5/6;background-color:eee8f1;運行結(jié)果用法w