整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
CSS Grid Generator是一個由Sarah Drasner創建的免費工具。它是一個可視化設計工具，允許咱們創建一個基本的 grid 布局，然后就可以使用生成對應的代碼，幫助咱們快速布局。
第一次進入是界面是這樣子的：
當我正在學習一些東西時，我發現最好的學習方法是使用現有的工具構建實用的東西。 在本文中，咱們先從一個簡單的布局開始，然后使用CSS Grid Generator創建在實際項目中使用所需的代碼。
首先從一個典型的布局開始，如下所示：
接著在 CSS Grid Generator 界面的右側更新對應的以下內容：
間距讓咱們的內容之間有一定的空白。可以只使用列間距，但我想在 Header 和 Footer 之前留出一些空白，所以還同時使用行間距。
接下來，就是需要定義應用程序的不同區域。在 CSS Grid Generator 中，可以單擊并拖動到需要合并地方來創建一個區域。咱們希望Footer跨越整個網格，側邊欄占用一個單元格，主內容區域跨越2列，Footer 跨越4列,最終效果，如下：
這看起來有點像咱們想要的布局，但仍然需要定義一些具體的尺寸。 在CSS Grid Generator 會注意到每行和每列旁邊都有一個輸入框，可用于設置特定大小。
這看起來更像更像咱們想要的布局，但是你可能會問1fr是多少。
軌道可以用任何長度單位來定義。Grid還引入了一個額外的長度單位，以幫助各位創建靈活的Grid軌道。新的fr單元表示網格容器中可用空間的一小部分。
第二行的1fr會告訴區域占用剩余的可用空間。如果將容器設置為100vh，就會占據整個頁面的內容，列也是如此。
點擊“請給我示例中的代碼”就可以查看對應布局生成的 CSS 代碼：
創建一個simple-layout.htm并添加以下代碼：
接下來添加上面生成的 CSS:
接著添加對應的標簽：
最后添加下面的CSS，它將為.div1 - .div5添加一些背景色：
div:not(.parent) {
padding: 10px;
background-color: rgb(199, 199, 199);
}運行：
這看起來很好，但你希望它占據整個瀏覽器窗口。所以需要向.parent類添加height: 100vh：
.parent {
display: grid;
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-rows: 100px 1fr 50px;
grid-column-gap: 20px;
grid-row-gap: 20px;
height: 100vh;
}最終效果：
兩個相鄰的網絡線之間為網絡軌道。
圖中的同方向 1 和 2， 2 和 3 都是相鄰的網絡線，當然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相鄰的網絡線。
相鄰的網絡線為網格軌道，如下，黑色1 和 2 之間就構成了網絡軌道(背景深橘色)：
上面總共有 5 個網絡軌道，水平方向灰色 1 和 2， 2 和 3， 3 和 4，豎直方向黑色的 1 和 2， 2 和 3，共 5 個。
兩個相鄰的列網絡線和兩個相鄰的行網絡線組成的就是網絡單元，如下面的深橘色背景就是網絡單元。
網絡單元要與網絡項(項目)區別開來，網絡項是 Html 中可以找的到 Dom 元素，網絡單元是在定義容器的時候，它就會分割出來的一個一個單元格。
四個網絡線包圍的總空間。
剩余空間分配數，用于在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配。
它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局 ?
Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。
Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。
Grid 布局則是將容器劃分成"行"和"列"，產生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。
<section>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
</section>
<!-- 以上代碼section為容器、div為項目 （項目不包括p標簽） -->容器里面的水平區域稱為"行"，垂直區域稱為"列"。
行和列的交叉區域，稱為"單元格"。
劃分網格的線，稱為"網格線"。水平網格線劃分出行，垂直網格線劃分出列。
1、啟動網格布局
display:grid
/*
屬性值：
grid 為塊狀網格容器 （容器自上而下排列）
line-grid 為內聯網格容器（容器橫向排列）
*/2、劃分行和列
grid-template-columns:
grid-template-rows:grid-template-columns:200px 200px 200px
grid-template-rows:200px 200px 200pxgrid-template-columns：repeat(auto-fill,33.33%);
/*
當項目寬高固定，容器不固定的情況下，自動填充網格列數
*/grid-template-columns：repeat(auto-fill,33.33%);
/*
當項目寬高固定，容器不固定的情況下，自動填充網格列數
*/grid-template-columns：repeat(auto-fill,33.33%);
/*
當項目寬高固定，容器不固定的情況下，自動填充網格列數
*/為了方便表示比例關系，網格布局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為1fr和2fr，就表示后者是前者的兩倍。
grid-template-columns:1fr 3fr 1fr;
grid-template-rows:repeat(3,100px);grid-template-columns: 1fr 1fr minmax(100px, 1fr);
/*
minmax(100px, 1fr)表示列寬不小于100px，不大于1fr
*/grid-template-columns:30px auto 20px;
grid-template-rows:repeat(3,100px);grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
/*
指定網格布局為3行x3列，因此有4根垂直網格線和4根水平網格線。方括號里面依次是這八根線的名字。
*/3、設置行間距 || 列間距
grid-row-gap:20px /* 行間距 */
grid-column-gap:20px /* 列間距 */
grid-gap:30px 30px /* 復合式寫法 */
?
/*注：新版本已經省略 grid- 前綴 row-gap \ column-gap \ gap*/display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
?
/*
將整個網格容器分為9個區域，每個區域對應一個單元格
通過grid-area 指定項目名稱。
*/display:grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);
grid-template-areas: 'a a a'
'. . b'
'. c c';5、規劃子元素放置的順序（默認為先排行后排列）
grid-auto-flow: column | row;
/*
row dense和column dense。
這兩個值主要用于，某些項目指定位置以后，剩下的項目怎么自動放置。
*/6、設置單元格內容在單元格內 水平 | 垂直 的對齊方式
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <justify-items> <align-items> /*復合式寫法*/
/*
start：對齊單元格的起始邊緣。
end：對齊單元格的結束邊緣。
center：單元格內部居中。
stretch：拉伸，占滿單元格的整個寬度（默認值）。
*/7、設置整個內容區域在容器里面的水平 | 垂直 對齊方式
justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <justify-content> <align-content> /* 復合式寫法 */
?
/*
start - 對齊容器的起始邊框。
end - 對齊容器的結束邊框。
center - 容器內部居中。
stretch - 項目大小沒有指定時，拉伸占據整個網格容器。
space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。
space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。
pace-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。
*/grid-column-start
grid-column-end
grid-row-start
grid-row-end
?
/*
grid-column-start屬性：左邊框所在的垂直網格線
grid-column-end屬性：右邊框所在的垂直網格線
grid-row-start屬性：上邊框所在的水平網格線
grid-row-end屬性：下邊框所在的水平網格線
*/grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end:4;2、grid-column ， grid-row
grid-column屬性是grid-column-start和grid-column-end的合并簡寫形式 grid-row屬性是grid-row-start屬性和grid-row-end的合并簡寫形式。
CSS Grid Generator是一個由Sarah Drasner創建的免費工具。它是一個可視化設計工具，允許咱們創建一個基本的 grid 布局，然后就可以使用生成對應的代碼，幫助咱們快速布局。
第一次進入是界面是這樣子的：
當我正在學習一些東西時，我發現最好的學習方法是使用現有的工具構建實用的東西。 在本文中，咱們先從一個簡單的布局開始，然后使用CSS Grid Generator創建在實際項目中使用所需的代碼。
首先從一個典型的布局開始，如下所示：
接著在 CSS Grid Generator 界面的右側更新對應的以下內容：
間距讓咱們的內容之間有一定的空白。可以只使用列間距，但我想在 Header 和 Footer 之前留出一些空白，所以還同時使用行間距。
接下來，就是需要定義應用程序的不同區域。在 CSS Grid Generator 中，可以單擊并拖動到需要合并地方來創建一個區域。咱們希望Footer跨越整個網格，側邊欄占用一個單元格，主內容區域跨越2列，Footer 跨越4列,最終效果，如下：
這看起來有點像咱們想要的布局，但仍然需要定義一些具體的尺寸。 在CSS Grid Generator 會注意到每行和每列旁邊都有一個輸入框，可用于設置特定大小。
這看起來更像更像咱們想要的布局，但是你可能會問1fr是多少。
軌道可以用任何長度單位來定義。Grid還引入了一個額外的長度單位，以幫助各位創建靈活的Grid軌道。新的fr單元表示網格容器中可用空間的一小部分。
第二行的1fr會告訴區域占用剩余的可用空間。如果將容器設置為100vh，就會占據整個頁面的內容，列也是如此。
點擊“請給我示例中的代碼”就可以查看對應布局生成的 CSS 代碼：
創建一個simple-layout.htm并添加以下代碼：
接下來添加上面生成的 CSS:
接著添加對應的標簽：
最后添加下面的CSS，它將為.div1 - .div5添加一些背景色：
div:not(.parent) {
padding: 10px;
background-color: rgb(199, 199, 199);
}運行：
這看起來很好，但你希望它占據整個瀏覽器窗口。所以需要向.parent類添加height: 100vh：
.parent {
display: grid;
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-rows: 100px 1fr 50px;
grid-column-gap: 20px;
grid-row-gap: 20px;
height: 100vh;
}最終效果：
兩個相鄰的網絡線之間為網絡軌道。
圖中的同方向 1 和 2， 2 和 3 都是相鄰的網絡線，當然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相鄰的網絡線。
相鄰的網絡線為網格軌道，如下，黑色1 和 2 之間就構成了網絡軌道(背景深橘色)：
上面總共有 5 個網絡軌道，水平方向灰色 1 和 2， 2 和 3， 3 和 4，豎直方向黑色的 1 和 2， 2 和 3，共 5 個。
兩個相鄰的列網絡線和兩個相鄰的行網絡線組成的就是網絡單元，如下面的深橘色背景就是網絡單元。
網絡單元要與網絡項(項目)區別開來，網絡項是 Html 中可以找的到 Dom 元素，網絡單元是在定義容器的時候，它就會分割出來的一個一個單元格。
四個網絡線包圍的總空間。
剩余空間分配數，用于在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
