一. 實現原理
網格布局是通過容器的大小，平均分為12份(可以修改),再調整內外邊距,和**布局有點類似但是也存在區別。
實現步驟如下:
(1) 資料行.row 必須包含在容器.container 中, 以便賦予核實的對齊方式和內間距設定
class="container">
class="row">div>
div>
(2) 在行(.row)中可以新增列(.column)，但列數之和不能超過平分的總列數，比如12
class="container">
class="row">
class="col-md-4">div>
class="col-md-8">div>
div>
div>
(3) 具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器(.row)的直接子元素
(4) 通過設定內距（padding）從而建立列與列之間的間距。然後通過為第一列和最後一列設定負值的外距（margin）來抵消內距(padding)的影響
二. 基本用法
複製**
class="container">
class="row">
class="col-md-4">col-md-4
div>
class="col-md-8">col-md-8
div>
div>
class="row">
class="col-md-3">col-md-3
div>
class="col-md-9">col-md-9
div>
div>
div>
以上**中定義了兩行, 其中第一行比例為4:8，第二行比例為3:9，執行頁面效果如下圖
三. 引數介紹
通過下表可以詳細檢視 bootstrap 的柵格系統是如何在多種螢幕裝置上工作的。
四. 偏移量
有的時候，我們不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術手段來。這個時候就可以使用列偏移（offset）功能來實現。使用列偏移也非常簡單，只需要在列元素上新增類名「col-md-offset-*」(其中星號代表要偏移的列組合數)，那麼具有這個類名的列就會向右偏移。例如，你在列元素上新增「col-md-offset-4」，表示該列向右移動4個列的寬度。
class="container">
列向右移動四列的間距
class="row">
class="col-md-4">.col-md-4
div>
class="col-md-2 col-md-offset-4">列向右移動四列的間距div>
class="col-md-2">.col-md-3
div>
div>
class="row">
class="col-md-4">.col-md-4
div>
class="col-md-4 col-md-offset-4">列向右移動四列的間距div>
div>
div>
class="container">
發生行斷裂
class="row">
class="col-md-4">.col-md-4
div>
class="col-md-2 col-md-offset-4">列向右移動四列的間距div>
class="col-md-2">.col-md-3
div>
div>
class="row">
class="col-md-4">.col-md-4
div>
class="col-md-4 col-md-offset-4">列向右移動四列的間距div>
div>
class="row">
class="col-md-3">.col-md-3
div>
class="col-md-3 col-md-offset-3">col-md-offset-3
div>
class="col-md-4">col-md-4
div>
div>
div>
class="container">
class="row">
class="col-sm-2">col-sm-2
div>
class="col-sm-2 col-sm-offset-2">col-sm-2
div>
class="col-sm-2">col-sm-2
div>
class="col-sm-3 col-sm-offset-1">col-sm-2
div>
div>
div>
執行頁面效果圖如下:
五. 列排序
列排序其實就是改變列的方向，就是改變左右浮動，並且設定浮動的距離。在bootstrap框架的網格系統中是通過新增類名「col-md-push-」和「col-md-pull-」 (其中星號代表移動的列組合數)
六. 巢狀
bootstrap框架的網格系統還支援列的巢狀。你可以在乙個列中新增乙個或者多個行（row）容器，然後在這個行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時，就是當前外部列的寬度
class="container">
class="row">
class="col-md-8">
我的裡面巢狀了乙個網格
class="row">
class="col-md-6">col-md-6
div>
class="col-md-6">col-md-6
div>
div>
div>
class="col-md-4">col-md-4
div>
div>
class="row">
class="col-md-4">.col-md-4
div>
class="col-md-8">
我的裡面巢狀了乙個網格
class="row">
class="col-md-4">col-md-4
div>
class="col-md-4">col-md-4
div>
class="col-md-4">col-md-4
div>
div>
div>
div>
div>
css 網格布局 CSS網格布局簡介
css 網格布局 css在不斷發展。目前正在談論的某些功能可能會在不久的將來成為主流，而其他功能可能會逐漸淡出人們的視線。無論哪種方式，了解將來考慮使用哪些css選擇器，布局模組和過濾器都將使您成為更強大的前端開發人員。網格布局是一種很快就會被廣泛接受的選擇。您可以想象，css的這一子集可以簡化內容...
Grid布局（網格布局）
網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...
網格布局（grid布局）
他可以將頁面分為多個網格，可以任意組合不同的網格 做出各種各樣的布局。網格布局為二維性質的。grid row gap 1rem 行間距 grid column gap 1rem 列間距 grid gap 1rem 設定行列間距 grid template columns 列寬和列數 grid tem...