1. 首頁 > 生活百科 > >

2 CSS布局秘籍-6脈神劍( 二 )

生活百科

grid-template-columns: 200px max-content 100px auto auto;/* 5列 */● auto：自動排列；max-content：最大內容區域● 尺寸值：px、em、%● 比例單位fr：2fr 1fr 1fr; 比例系數● minmax()函數：minmax(100px,auto)，區間值● repeat()函數：repeat(2, 2fr 1fr) ， 重復創建行列grid-template-areasIE區域網格命名：按照區域命名的網格布局，先定義區域，在給子元素設置區域名稱● 字符串命名，空格隔開，.標識空的格子● 每個命名為一個單元格 ， 同名合并格子?grid-area(子元素)給子元素設置區域名grid-area: leftgrid-template IE定義行列 ， 上面rows / columns、areas的簡寫grid-template: 50px 1fr / 150px 1fr;grid-gap、gap IE定義行、列的間隙，等同于gapgrid-gap: 10px 20px;gap /ɡ?p/ 縫隙?row-gap行間間隙row-gap: 5px;?column-gap列間間隙column-gap: 10px;grid-auto-rowsIE10自動設定隱式網格的大小-行網格-高度grid-auto-rows:50px;grid-auto-columns自動設定隱式網格的大小-列網格-寬度grid-auto-columns: 1fr;grid-column(子元素)、grid-row(子元素) IE設置子元素網格線序號坐標（行/列） ， 注意這里的坐標是網格的行列分割線，不是單元格● auto、auto-fill：自動排列● 行列坐標序號 grid-column: 2;● 跨行列坐標，起/始坐標位置grid-column: 1 / 3;● /span跨行列數量：[開始坐標 /span [跨單元格數量]其他：單位/函數描述值/補充flex：fr (IE)網格（grid）可變長度單位grid-template-columns: 200px 1fr 1fr;minmax(min,max)定義長寬范圍的閉區間函數，在gird網格布局中使用 。參數為尺寸值、fr、auto、min-content、max-contentminmax(100px, auto)repeat(重復次數,值..) IE網格列表尺寸的重復設置函數，用于gird布局● 第一個參數：重復次數；auto-fill：盡量最大網格數排列● 后面參數：重復的網格尺寸repeat(auto-fill,80px minmax(200px, auto)) ;.grid {display: grid;grid-template-columns: 200px max-content 100px auto 10%;grid-template-rows: 100px auto;/* 兩行布局：行定義/列定義 */grid-template: minmax(100px,auto) 40px/ 200px 1fr 1fr;/* 兩行三列命名布局，子元素需指定名稱 grid-area */grid-template-areas: "head head right" "navmain right";grid-auto-rows: 50px;/* 網格間隙距離 */row-gap: 5px;column-gap: 10px;grid-gap: 5px 10px;}.grid div:first-child{/* 跨2個格子，兩種方式 */grid-column: 1/3;grid-column: 1 /span 2;/* 命名布局，指定命名格子 */grid-area: right;}隱式網格通過grid-template-columns 、 grid-template-rows、grid-template等顯示申明創建的網格為顯示網格，當子元素超出時會自動換行進行網格排列，這部分稱為隱式網格，隱式網格的大小默認是auto（根據內容自適應），可以通過grid-auto-rows、grid-auto-columns來設置隱式行列網格的尺寸大小 。
網格分割線網格線是從頭開始的，一般來說n行有n + 1根水平網格線，m列有m + 1根垂直網格線 。設置子元素的網格坐標grid-row / grid-column時，用的坐標是基于網格線的，而不是格子 。

2 CSS布局秘籍-6脈神劍

文章插圖
<style>.from {display: grid;grid-gap: 8px 5px;/* 設置行列網格 */grid-template-columns: repeat(2, 80px minmax(120px, 1fr));grid-template-rows: repeat(3, minmax(40px, auto));grid-auto-rows: minmax(40px, auto);/* 合并的寫法 */grid-template: repeat(2, minmax(36px, auto)) / repeat(2, 80px minmax(180px, 1fr));}.from * {box-sizing: border-box;padding: 3px; margin: 0px;background-color: lightyellow;}.from label {display: flex; padding: 0 3px;align-items: center;justify-content: right;}.from>.form-cell {display: flex; padding: 0 10px;align-items: center;}.from>textarea {grid-column: 2/5;grid-column: 2/span 3;resize: none;}</style><div class="from"><label for="">姓名：</label><input type="text"><label for="">籍貫：</label><input type="text"><label for="">性別：</label><div class="form-cell"><input type="radio"><label for="">男</label>&nbsp;&nbsp;<input type="radio"><label for="">女</label></div><label for="">生日：</label><input type="date"><label for="">簡介：</label><textarea name="" id="" cols="100" rows="5">1111</textarea></div>
2 CSS布局秘籍-6脈神劍

文章插圖
區域網格命名用“名字”來劃分并指定區域，用法類似網格線序號，用來做頁面布局更輕松、可讀性好 。

推薦閱讀