display: grid

display: grid 網格顯示
grid-template-columns 網格模板列
grid-template-rows 網格模板行

<style> .grid-container { display: grid; grid-template-columns: 200px 250px 300px; /*3 列寬度 column width */ grid-template-rows: 80px 80px 100px 150px; 80px; /*4 行高度 rows height */ grid-gap: 5px; /*區域間隙差距 Regional gap*/ background-color: #2196F3; padding: 5; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center;font-size: 24px; } .item1 { grid-column-start: 1; /*列起始位置 column start position */ grid-column-end: 3; /*列終結位置 column end position */ grid-row-start: 1; /*行起始位置 row start position */ grid-row-end: 3; /*行終結位置 row end position */ } </style> <div class="grid-container"> <div class="item1">item 1<br>200+250x X 80+80</div> <div class="item2">item 2<br>350 X 80</div> <div class="item3">item 3<br>350 X 80</div> <div class="item4">item 4<br>200 X =100</div> <div class="item5">item 5<br>250 X 100</div> <div class="item6">item 6<br>350 X 100</div> <div class="item7">item 7<br>200 X 150</div> <div class="item8">item 8<br>250 X 150</div> <div class="item9">item 9<br>350 X 150</div> </div> <pre style="font-size: 22px;">.grid-container { grid-template-columns: 200px 250px 300px; // 3 列寬度 grid-template-rows: 80px 80px 100px 150px; 80px;// 4 行高度 } .item1{ grid-column-start: 1; //列起始位置 column start position grid-column-end: 3; //列終結位置 column end position grid-row-start: 1; //行起始位置 row start position grid-row-end: 3; //行終結位置 row end position }

00

<style> .grid-container { display: grid; grid-template-columns: 200px 250px 300px; /*3 列寬度 column width */ grid-template-rows: 80px 80px 100px 150px; 80px; /*4 行高度 rows height */ grid-gap: 5px; /*區域間隙差距 Regional gap*/ background-color: #2196F3; padding: 5; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center;font-size: 24px; } .item5 { grid-column-start: 2; /*列起始位置 column start position */ grid-column-end: 3; /*列終結位置 column end position */ grid-row-start: 2; /*行起始位置 row start position */ grid-row-end: 4; /*行終結位置 row end position */ } </style> <div class="grid-container"> <div class="item1">item 1<br>200 X 80</div> <div class="item2">item 2<br>250 X 80</div> <div class="item3">item 3<br>300 X 80</div> <div class="item4">item 4<br>200 X 80</div> <div class="item5">item 5<br>250 X 80+100</div> <div class="item6">item 6<br>300 X 80</div> <div class="item7">item 7<br>200 X 100</div> <div class="item8">item 8<br>300 X 100</div> <div class="item9">item 9<br>200 X 150</div> <div class="item8">item 10<br>250 X 150</div> <div class="item9">item 11<br>300 X 150</div> </div> <pre style="font-size: 22px;">.grid-container { grid-template-columns: 200px 250px 300px; // 3 列寬度 grid-template-rows: 80px 80px 100px 150px; 80px;// 4 行高度 } .item5 { grid-column-start: 2; /*列起始位置 column start position */ grid-column-end: 3; /*列終結位置 column end position */ grid-row-start: 2; /*行起始位置 row start position */ grid-row-end: 4; /*行終結位置 row end position */ }</pre>

00

<style> .grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; /*3 列寬度 column width */ grid-template-rows: 1fr 2fr 1fr 1.5fr; /*4 行高度 rows height */ grid-gap: 5px; /*區域間隙差距 Regional gap*/ background-color: #2196F3; padding: 5; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center;font-size: 24px; } .item5f { grid-column-start: 2; /*列起始位置 column start position */ grid-column-end: 3; /*列終結位置 column end position */ grid-row-start: 2; /*行起始位置 row start position */ grid-row-end: 4; /*行終結位置 row end position */ } </style> <div class="grid-container"> <div>column 1fr <br> row 1fr</div> <div>column 2fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 1fr <br> row 2fr</div> <div>column 2fr <br> row 2fr</div> <div>column 1fr <br> row 2fr</div> <div>column 1fr <br> row 1fr</div> <div>column 2fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 1fr <br> row 1.5fr</div> <div>column 2fr <br> row 1.5fr</div> <div>column 1fr <br> row 1.5fr</div> <div>column 1fr <br> row 1fr</div> <div>column 2fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> </div> <pre style="font-size: 22px;"> fr 代表格線內容器，可用空間的分塊, 1fr 1格..2fr 2格..... grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr 1.5fr </pre>

00

<style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr 1.5fr) ; grid-template-rows: repeat(3, 1fr 1.5fr); grid-gap: 5px; background-color: #2196F3; padding: 5; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center;font-size: 24px; } .txt { grid-column-start: 1; /*列起始位置 column start position */ grid-column-end: 7; /*列終結位置 column end position */ grid-row-start: 5; /*行起始位置 row start position */ grid-row-end: 5; /*行終結位置 row end position */ } </style> <div class="grid-container"> <div>column 1fr <br> row 1fr</div> <div>column 2fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 1fr <br> row 2fr</div> <div>column 2fr <br> row 2fr</div> <div>column 1fr <br> row 2fr</div> <div>column 1fr <br> row 1fr</div> <div>column 2fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 1fr <br> row 1.5fr</div> <div>column 2fr <br> row 1.5fr</div> <div>column 1fr <br> row 1.5fr</div> <div>column 1fr <br> row 1fr</div> <div>column 2fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 2fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 2fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div>column 2fr <br> row 1fr</div> <div>column 1fr <br> row 1fr</div> <div class="txt"> <pre style="font-size: 22px;"> grid-template-columns: repeat(3, 1fr 1.5fr) ; grid-template-rows: repeat(3, 1fr 1.5fr); </pre> </div> </div>

00

Edit