{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS Grid 布局是一种强大并且富有创意的的布局方案，这篇文章专门为不了解 Grid 的 web 开发人员来介绍它，我将从以下几个方面来介绍它"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"为什么需要 Grid。Grid Line 在生产环境中怎么安全的使用 Grid"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"介绍 Gird 基本概念。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"开始学习使用 Gird。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"在生产环境中怎么安全的使用 Grid。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"为什么需要 Grid"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前我们有很多种布局方案，比如最初我们使用表格布局，后面使用 float, position 和 inline-block 来进行布局, 由于这些方法在设计之初上并不是用于布局的，而是用于图文展示，由此 CSS 当初设计的不是很完美，并且遗漏了许多功能，比如说无法很方便的实现垂直居中; 无法显式的去创建 BFC，只能通过一些 hack 手段去处理，比如 overflow: hidden, 或者使用 clear:both 去清除浮动带来的副作用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2009 年，W3C 提出了一种新的方案 ----"},{"type":"codeinline","content":[{"type":"text","text":"Flexbox"}]},{"type":"text","text":" 布局, Flex 布局是轴线布局，只能指定 \"项目\" 针对轴线的位置，可以看作是一维布局，但是对于复杂的二维布局就有心无力了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Grid 布局是 CSS 诞生以来第一个专门为解决布局问题而生的方案, 它将容器划分成 \"行\" 和 \"列\"，产生单元格，然后指定 \"项目所在\" 的单元格，可以看作是二维布局。"},{"type":"codeinline","content":[{"type":"text","text":"Grid"}]},{"type":"text","text":" 布局与 "},{"type":"codeinline","content":[{"type":"text","text":"Flex"}]},{"type":"text","text":" 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别,"},{"type":"codeinline","content":[{"type":"text","text":"Grid"}]},{"type":"text","text":" 主要是用于布局的，而 "},{"type":"codeinline","content":[{"type":"text","text":"Flex"}]},{"type":"text","text":" 是主要用于内容的，两种方案并不是水火不容的，而是相辅相成的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另外值得一提的一点是在栅格系统方案，我们也遇见过很多的 CSS 框架，例如 "},{"type":"codeinline","content":[{"type":"text","text":"Bootstrap"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"Foundation"}]},{"type":"text","text":", 它们都提供了很优秀的 "},{"type":"codeinline","content":[{"type":"text","text":"grid layout"}]},{"type":"text","text":" 模板，但是它们本质上并不是 "},{"type":"codeinline","content":[{"type":"text","text":"grid"}]},{"type":"text","text":"，而是通过 "},{"type":"codeinline","content":[{"type":"text","text":"float"}]},{"type":"text","text":" 来实现，"},{"type":"codeinline","content":[{"type":"text","text":"CSS grid"}]},{"type":"text","text":" 而跟他们是完全不同的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"web 网页的布局基础是最初是基于 "},{"type":"codeinline","content":[{"type":"text","text":"float"}]},{"type":"text","text":" 的，这导致了布局的模型是一维的，所以当我们去进行设计布局的时候都是从行去考虑方案的。下面是一个简单两列布局的实例，虽然看起来图片 B 下方似乎有一个列，但是实际上没有，我们都是通过行去进行布局操作的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/46\/462aaab282aa54500ef13c2f0a26cfbc.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相比之下 "},{"type":"codeinline","content":[{"type":"text","text":"CSS Gird"}]},{"type":"text","text":" 布局，我们会通过以下图片所展示的方式来进行思考。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/1a\/1acc25344c931ca6fde73f38a587de4a.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在图中我们有 "},{"type":"codeinline","content":[{"type":"text","text":"二维系统"}]},{"type":"text","text":", 不单单只有行，其实还有列，这是一个全新的思考方式，类似于出现 "},{"type":"codeinline","content":[{"type":"text","text":"React\/Vue Hook"}]},{"type":"text","text":" 时候需要调整思考问题的方式, 接下来我会带你去理解它。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"介绍 Gird 基本概念。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在深入了解 Grid 的概念之前，重要的是了解术语，由于此处涉及的术语在概念上有点相似，因此，如果你不理解它们所代表的含义，就很容易将它们混淆。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Grid Container"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在元素上设置 "},{"type":"codeinline","content":[{"type":"text","text":"display: grid"}]},{"type":"text","text":", 能够使它成为一个 "},{"type":"codeinline","content":[{"type":"text","text":"Grid Container"}]},{"type":"text","text":"，它的直接子元素都将成为 "},{"type":"codeinline","content":[{"type":"text","text":"grid Item"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"
迈向 Grid 二维布局时代
{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS Grid 布局是一种强大并且富有创意的的布局方案，这篇文章专门为不了解 Grid 的 web 开发人员来介绍它，我将从以下几个方面来介绍它"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"为什么需要 Grid。Grid Line 在生产环境中怎么安全的使用 Grid"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"介绍 Gird 基本概念。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"开始学习使用 Gird。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":4,"align":null,"origin":null},"content":[{"type":"text","text":"在生产环境中怎么安全的使用 Grid。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":5,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"为什么需要 Grid"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前我们有很多种布局方案，比如最初我们使用表格布局，后面使用 float, position 和 inline-block 来进行布局, 由于这些方法在设计之初上并不是用于布局的，而是用于图文展示，由此 CSS 当初设计的不是很完美，并且遗漏了许多功能，比如说无法很方便的实现垂直居中; 无法显式的去创建 BFC，只能通过一些 hack 手段去处理，比如 overflow: hidden, 或者使用 clear:both 去清除浮动带来的副作用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2009 年，W3C 提出了一种新的方案 ----"},{"type":"codeinline","content":[{"type":"text","text":"Flexbox"}]},{"type":"text","text":" 布局, Flex 布局是轴线布局，只能指定 \"项目\" 针对轴线的位置，可以看作是一维布局，但是对于复杂的二维布局就有心无力了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Grid 布局是 CSS 诞生以来第一个专门为解决布局问题而生的方案, 它将容器划分成 \"行\" 和 \"列\"，产生单元格，然后指定 \"项目所在\" 的单元格，可以看作是二维布局。"},{"type":"codeinline","content":[{"type":"text","text":"Grid"}]},{"type":"text","text":" 布局与 "},{"type":"codeinline","content":[{"type":"text","text":"Flex"}]},{"type":"text","text":" 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别,"},{"type":"codeinline","content":[{"type":"text","text":"Grid"}]},{"type":"text","text":" 主要是用于布局的，而 "},{"type":"codeinline","content":[{"type":"text","text":"Flex"}]},{"type":"text","text":" 是主要用于内容的，两种方案并不是水火不容的，而是相辅相成的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另外值得一提的一点是在栅格系统方案，我们也遇见过很多的 CSS 框架，例如 "},{"type":"codeinline","content":[{"type":"text","text":"Bootstrap"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"Foundation"}]},{"type":"text","text":", 它们都提供了很优秀的 "},{"type":"codeinline","content":[{"type":"text","text":"grid layout"}]},{"type":"text","text":" 模板，但是它们本质上并不是 "},{"type":"codeinline","content":[{"type":"text","text":"grid"}]},{"type":"text","text":"，而是通过 "},{"type":"codeinline","content":[{"type":"text","text":"float"}]},{"type":"text","text":" 来实现，"},{"type":"codeinline","content":[{"type":"text","text":"CSS grid"}]},{"type":"text","text":" 而跟他们是完全不同的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"web 网页的布局基础是最初是基于 "},{"type":"codeinline","content":[{"type":"text","text":"float"}]},{"type":"text","text":" 的，这导致了布局的模型是一维的，所以当我们去进行设计布局的时候都是从行去考虑方案的。下面是一个简单两列布局的实例，虽然看起来图片 B 下方似乎有一个列，但是实际上没有，我们都是通过行去进行布局操作的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/46\/462aaab282aa54500ef13c2f0a26cfbc.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相比之下 "},{"type":"codeinline","content":[{"type":"text","text":"CSS Gird"}]},{"type":"text","text":" 布局，我们会通过以下图片所展示的方式来进行思考。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/1a\/1acc25344c931ca6fde73f38a587de4a.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在图中我们有 "},{"type":"codeinline","content":[{"type":"text","text":"二维系统"}]},{"type":"text","text":", 不单单只有行，其实还有列，这是一个全新的思考方式，类似于出现 "},{"type":"codeinline","content":[{"type":"text","text":"React\/Vue Hook"}]},{"type":"text","text":" 时候需要调整思考问题的方式, 接下来我会带你去理解它。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"介绍 Gird 基本概念。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在深入了解 Grid 的概念之前，重要的是了解术语，由于此处涉及的术语在概念上有点相似，因此，如果你不理解它们所代表的含义，就很容易将它们混淆。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Grid Container"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在元素上设置 "},{"type":"codeinline","content":[{"type":"text","text":"display: grid"}]},{"type":"text","text":", 能够使它成为一个 "},{"type":"codeinline","content":[{"type":"text","text":"Grid Container"}]},{"type":"text","text":"，它的直接子元素都将成为 "},{"type":"codeinline","content":[{"type":"text","text":"grid Item"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章