Chrome 开发者工具里的 CSS grid editor

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

看个具体的例子：

<!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>

效果如下：

当页面上的 HTML 元素应用了 display: grid 或 display: inline-grid 时，您可以在“样式”窗格中看到它旁边出现一个图标。单击该图标可切换 CSS 网格编辑器。在这里，您可以使用屏幕图标（例如 justify-content: space-around）预览潜在的变化，只需单击一下即可创作网格外观。

更多Jerry的原创文章，尽在：“汪子熙”:

Chrome 开发者工具里的 CSS grid editor相关推荐

小技巧：Chrome开发者工具里的Alt+单击
在Chrome开发者工具里单击一个元素左边的小三角符号,只会展开其继承结构的第一层直接子节点: 而Alt+Click,可以将该元素第一个子节点,以及该子节点原型链上的节点全部展开.将下图和上图进行比较 ...
html页面和Chrome开发者工具elements界面不一致的一个可能原因：没有在Chrome开发者工具里打开对Shadow DOM显示的支持
一个例子: 虽然UI上input field里显示的是Jerry,但是Chrome开发者工具里面并没有显示出来. 注意上图最下方,显示的input后面有#shadow-root.div. 打开sett ...
继承的CSS类在Chrome开发者工具里的显示
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
Firefox开发者工具里的CSS Flexbox Inspector
使用flex布局的元素,在HTML里能看到flex的小图标,如下图所示: 点击flex小图标,可以把flex container及其元素的轮廓高亮显示: 在这个例子里,a标签既是一个flex item ...
在Chrome开发者工具里手动测试element focus效果
在element标签页的styles里,选中:focus即可:
如何在Chrome开发者工具里找出SAP Fiori frontend server的systen ID
Created by Jerry Wang, last modified on Dec 01, 2015 Frontend server的system ID能通过Chrome的Network检测请求s ...
在Chrome开发者工具里观察到的SAP Spartacus productCodes
projects/core/src/cms/facade/cms.service.ts: ComponentData的数据结构: CmsProductCarouselComponent: produc ...
Fiori应用deploy到云上后在Chrome开发者工具里Source标签页的外观
Created by Wang, Jerry on Jul 14, 2015 Go to start of metadata https://fiorilaunchpad-faasperf.dispa ...
SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

Chrome 开发者工具里的 CSS grid editor

Chrome 开发者工具里的 CSS grid editor相关推荐

最新文章

热门文章