grid布局合并单元格
生活随笔
收集整理的這篇文章主要介紹了
grid布局合并单元格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考：http://www.w3cplus.com/css3/css-grid-layout-merge-cells.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}/* .wrapper {display: grid;grid-template-columns: repeat(4, (col) 100px (gutter) 10px);grid-template-rows: repeat(4, (row) auto (gutter) 10px); } */.box {background-color: #444;color: #fff;font-size: 150%;padding: 20px;text-align: center;}.wrapper {display: grid;grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto;}.a {/* * grid-column: 1 / 6;* grid-row: 1 / 2; */grid-column: 1 / span 5;grid-row: 1;}.b {/* * grid-column: 7 / 8;* grid-row: 1 / 10;*/grid-column: 7;grid-row: 1 / span 9;background: orange;}.c {/* * grid-column: 1 / 2;* grid-row: 3 / 4;*/grid-column: 1;grid-row: 3;}.d {grid-column: 3;grid-row: 3;}.e {grid-column: 5;grid-row: 3;}.f {grid-column: 1 / span 3;grid-row: 5;}.g {grid-column: 5;grid-row: 5;}.h {grid-column: 1;grid-row: 7;}.i {grid-column: 3 / span 3;grid-row: 7;}.j {grid-column: 1 / span 5;grid-row: 9;}</style> </head><body><div class="wrapper"><div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div><div class="box g">G</div><div class="box h">H</div><div class="box i">I</div><div class="box j">J</div></div> </body></html>轉載于:https://www.cnblogs.com/yesyes/p/7250786.html
總結
以上是生活随笔為你收集整理的grid布局合并单元格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hadoop:eclipse配置hado
- 下一篇： Go指针