網格分析：n行n列組成網格（拐來拐去又變為**）；
在css布局中我們只需要實現一行n列效果，然後組成多行多列：
必須調整全域性盒模型：
*響應式網格檢視通常是 每行12 列，行寬度為100%，行、列在瀏覽器視窗大小調整時會自動伸縮；
由此我們可以計算出每列的百分比: 100% / 12 列 = 8.33%；
在每列中指定 class，class="col-"用於定義每列有幾個 span（該列寬度實際橫跨幾列得到） ：
.col-1
.col-2
.col-3
.col-4
.col-5
.col-6
.col-7
.col-8
.col-9
.col-10
.col-11
.col-12
所有的列向左浮動：
[class*="col-"] ，第二列寬度為.col-9 。
css 網格布局 CSS網格布局簡介
css 網格布局 css在不斷發展。目前正在談論的某些功能可能會在不久的將來成為主流，而其他功能可能會逐漸淡出人們的視線。無論哪種方式，了解將來考慮使用哪些css選擇器，布局模組和過濾器都將使您成為更強大的前端開發人員。網格布局是一種很快就會被廣泛接受的選擇。您可以想象，css的這一子集可以簡化內容...
CSS 網格布局
css網格布局引入了二維網格布局系統，可用於布局頁面主要的區域布局或小型元件。本文介紹了css網格布局 與 css網格布局規範 level 1 中的新術語。css網格布局和彈性盒布局的主要區別在於彈性盒布局是為一維布局服務的 沿橫向或縱向的 而網格布局是為二維布局服務的 同時沿著橫向和縱向 這兩個規...
css網格布局
12 3456 效果是這樣的 現在開始修改css語句 grid template columns 1fr 1fr 1fr 只改了這一行，效果如下，直接就是響應式了 再稍作修改 也就是說，fr控制寬度的比例。grid template columns repeat 3,100px grid templ...