Chrome 开发者工具里的 CSS grid editor
生活随笔
收集整理的這篇文章主要介紹了
Chrome 开发者工具里的 CSS grid editor
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內(nèi)部多個項目的位置。但是，它們也存在重大區(qū)別。
Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。Grid 布局遠(yuǎn)比 Flex 布局強(qiáng)大。
看個具體的例子：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title><style>span {font-size: 2em; }#container{display: grid;grid-template-columns: 50px 50px 50px;grid-template-rows: 50px 50px 50px; }.item {font-size: 2em;text-align: center;border: 1px solid #e5e4e9; }.item-1 {background-color: #ef342a; }.item-2 {background-color: #f68f26; }.item-3 {background-color: #4ba946; }.item-4 {background-color: #0376c2; }.item-5 {background-color: #c077af; }.item-6 {background-color: #f8d29d; }.item-7 {background-color: #b5a87f; }.item-8 {background-color: #d0e4a9; }.item-9 {background-color: #4dc7ec; } </style> </head> <body><span>foo</span> <div id="container"><div class="item item-1">1</div><div class="item item-2">2</div><div class="item item-3">3</div><div class="item item-4">4</div><div class="item item-5">5</div><div class="item item-6">6</div><div class="item item-7">7</div><div class="item item-8">8</div><div class="item item-9">9</div> </div> <span>bar</span> </body> </html>效果如下：
當(dāng)頁面上的 HTML 元素應(yīng)用了 display: grid 或 display: inline-grid 時，您可以在“樣式”窗格中看到它旁邊出現(xiàn)一個圖標(biāo)。 單擊該圖標(biāo)可切換 CSS 網(wǎng)格編輯器。 在這里，您可以使用屏幕圖標(biāo)（例如 justify-content: space-around）預(yù)覽潛在的變化，只需單擊一下即可創(chuàng)作網(wǎng)格外觀。
更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:
總結(jié)
以上是生活随笔為你收集整理的Chrome 开发者工具里的 CSS grid editor的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 飞机网速更快了！工信部批复5G地空通信试
- 下一篇： SASS 和 SCSS 的区别