時間：2023-09-06 20:18:01 | 來源：網(wǎng)站運營
時間：2023-09-06 20:18:01 來源：網(wǎng)站運營
CSS+HTML<網(wǎng)格布局grid>： 你可能會問
在線咨詢
網(wǎng)格布局可以干什么，我這里簡單的了解了一下。發(fā)現(xiàn)類似計算器,鍵盤的排版都是可以用網(wǎng)格布局的，而且在項目開發(fā)中的一些商品布局或者文章布局等，也是可以用的。但是也要看你的熟練度了，我之前多用的是彈性布局display:flex，了解過網(wǎng)格布局 display:grid后，發(fā)現(xiàn)有些東西用起來還是用后者要方便很多，但是具體也沒用過，不敢說有沒有一些坑位～～ 但是多多益善,知道的多，日后必能派上用場，這里為大家提供一些相關(guān)學(xué)習網(wǎng)格布局的網(wǎng)站，也可以直接通過我這邊代碼的注釋，直接去理解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { box-sizing: border-box; } body { min-height: 100vh; display: grid; /* 1ch 等于一個 0 的寬度 */ /* 1ch = 1個英文 = 1個數(shù)字 */ /* 2ch = 1個中文 */ /* auto-fill; 如果容器大小不固定，項目大小固定，可以用auto-fill關(guān)鍵字自動填充； */ /* 列 自動填充列，每列為30個字符寬度 */ grid-template-columns: repeat(auto-fit, 30ch); place-content: center; /* 每個網(wǎng)格的間距為 5vh */ grid-gap: 5vh; margin-left: auto; margin-right: auto; padding: 1rem; } #template { background: #fff; padding: 1rem; border-radius: 7px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.13); /* height: 25vh; */ /* 網(wǎng)格布局 */ display: grid; /* grid-gap:20px 20px; */ /* row-gap和column-gap簡寫形式；行間距和列間距 */ grid-gap: 0.5rem; } .col { background-color: #7B86F5; border-radius: 4px; display: grid; place-items: center; color: #fff; font-size: 1.5rem; } .template-2col { /* 重復(fù)寫值很麻煩，可以用repeate函數(shù)； repeat(次數(shù)，大小)； 例如：repeat(3,100px); //重復(fù)3次，每次100px； */ /* 2列，每列為1等分 */ grid-template-columns: repeat(2, 1fr); } .template-3col { /* 3列，每列為1等分 */ grid-template-columns: repeat(3, 1fr); } .template-4col { /* 2行 每行1等分/2列 每列1等分 */ grid-template: repeat(2, 1fr)/repeat(2, 1fr); } .template-5col { /* 區(qū)域劃分 2行2列 */ grid-template: "sidebar mainA""sidebar mainB"; /* 1列最小為100px最大為1等分 2列為1等分*/ grid-template-columns: minmax(100px, 1fr) 1fr; } .template-5col .left { overflow: hidden; /* 區(qū)域劃分 left占 sidebar 位*/ grid-area: sidebar; } .template-5col .left img { width: 100%; height: 100%; object-fit: cover; } .template-6col { grid-template: "mainA sidebar""mainB sidebar"; } .template-6col .right { grid-area: sidebar; } .template-7col { /* 3行 每行1等分/3列 每列1等分 */ grid-template: repeat(3, 1fr)/repeat(3, 1fr); } .template-8col { /* 3行 每行1等分/3列 每列1等分 */ grid-template: repeat(3, 1fr)/repeat(3, 1fr); /* 網(wǎng)格排列方式 默認row:水平排列 column:垂直排列 */ grid-auto-flow: column; } .template-9col { grid-template: repeat(3, 1fr)/repeat(3, 1fr); } .template-9col .col:nth-child(1) { /* 從第1行和第1列開始，跨越1行3列 */ grid-area: 1/1/span 1/span 3; } .template-9col .col:nth-child(3) { /* 從第2行和第2列開始，跨越2行2列 */ grid-area: 2/2/span 2/span 2; } .template-9col .col:nth-child(5) { /* 從第1行和第1列開始，跨越1行3列 */ grid-area: 4/1/span 2/span 1; } </style></head><body> <div id="template" class="template-1col"> <div class="col">1</div> <div class="col">2</div> </div> <div id="template" class="template-2col"> <div class="col">1</div> <div class="col">2</div> </div> <div id="template" class="template-3col"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> </div> <div id="template" class="template-4col"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div> <div id="template" class="template-5col"> <div class="col left"> 1 <!-- <img src="./pexels-pixabay-355747.png" alt=""> --> </div> <div class="col">2</div> <div class="col">3</div> </div> <div id="template" class="template-6col"> <div class="col right">1</div> <div class="col">2</div> <div class="col">3</div> </div> <div id="template" class="template-7col"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> </div> <div id="template" class="template-8col"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> </div> <div id="template" class="template-9col"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> </div></body></html>關(guān)鍵詞：布局
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
