网格系统

一、 简介 CSS网格布局（又称“网格”），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hack，遗漏了很多功能，例如垂直居中。后来出了 flexbox(盒子布局) ，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局，实际上它们（flexbox与grid）能很好的配合使用。Grid布局是第一个专门为解决布局问题而创建的CSS模块,2012年11月06日成立 草案 。 二、 容器 网格布局的容器是设置display为grid或者inline-grid，这一点跟flex布局很像，而它的子元素就是网格元素。 1. 网格线 分割网格的线称为网格线，包括横向（从左往右）和纵向（从右往左）。网格线可以通过grid-template-columns和grid-template-rows命名，默认以数字命名（注意是从1开始）。 2. 网格轨道（Grid Track） 两个相邻的网格线之间为网格轨道。你可以认为它们是网格的列或行，下面在第二个和第三个网格线之间的黄色部分为网格轨道 3. 网格单元（Grid Cell） 两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元。下面行网格线1（row

在学习了Flex弹性布局之后，grid网格布局也会非常容易。css3中display有属性值flex和grid，如果一个元素的display属性定义为flex,该元素就是flex容器，其直接子元素就是Flex Item ,相对的一个元素的display属性定义为grid该元素就是grid容器，其直接子元素默认成了父元素的Grid item。 Flex布局只有一个维度，项目在容器中只有4种排列方法：① 项目从左到右排列，向下折行 ② 项目从右到左排列，向下折行 ③ 项目从上到下排列，向右折行 ④ 项目从下到上排列，向左折行 详见： 一步步学习Flex弹性布局 Grid 布局是一个二维布局系统，它将Grid容器分成一个个网格，可以通过组合行和列，再将项目放入到网格中，做出各种各样的布局。 要说明的一点是Grid 布局和其他布局方式不是互斥的关系，他们完全可以协同工作。 浏览器支持情况： 第一步分割网格容器 网格容器与table容器相似，有行和列，不过名称叫水平轨道和垂直轨道，从容器的左上角为起点，容器被水平和垂直的网格线分割成单元格。 见下图： 假设我们有一块400px 400px的区域要做网格布局，来画一个4 4的网格，这样表格就有了16个单元格，水平方向和垂直方向各有5条网格线，4条轨道，网格线的宽度定义为3px。 单元格与网格项目并不是一回事

开篇名词解释： vh,vw ：指浏览器可视区域的高度宽度，用 100vh,100vw 表示 fr: 一个 fr 就是一个自动计算 , 相对于父容器剩余容量。例如： 先来看看网格布局的几大要素： part1：网格元素 1：网格线(grid-line) 2：网格列(grid-column) 3：网格行(grid-row) 4：单元格 5：网格间距（gutter:亦叫槽） 6：网格轨道（grid-track:其实就是行或列） 7：网格区域（grid-area:多个单元格组合成的区域） 1. grid-column-start: <line_number> | <line_alias> | span <number> | span <name> | auto ; grid-column-end: <line_number> | <line_alias> | span <number> | span <name> | auto ; grid-row-start: <line_number> | <line_alias> | span <number> | span <name> | auto ; grid-row-end: <line_number> | <line_alias> | span <number> | span <name> | auto ; 属性值： line:

参考链接 grid布局简介 CSS Grid（网格）布局，是一个 二维 的基于网络的布局系统。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能协同工作，而且配合得非常好）。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块 采用grid布局的元素，被称为grid容器(grid container)，简称“容器”。其所有直接子元素（直接子元素的子元素不包含在内）自动成为容器成员，称为grid项目(grid item)，简称“项目” 相关术语 Grid Container 设置了 display: gird 的元素。 这是所有 grid item 的直接父项。 在下面的例子中， .container 就是是 grid container < div class = " container " > < div class = " item item-1 " > </ div > < div class = " item item-2 " > </ div > < div class = " item item-3 " > </ div > </ div > Grid Item Grid 容器的孩子（直接子元素）。下面的 .item 元素就是 grid item，但

原文：A Complete Guide to Grid CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。 引言 CSS网格布局（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。 CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。 只要我们一直在制作网站，我们就一直在为解决布局问题不断探索， 而Grid是第一个专门为解决布局问题而生的CSS模块。 基础知识以及浏览器支持情况 一开始你需要使用display：grid把容器元素定义为一个网格，使用grid-template-columns和grid-template-rows设置列和行大小，然后使用grid-column 和 grid-row把它的子元素放入网格。

Grid - 二维网格布局 Grid - 二维网格布局 一介绍 原理 基础概念 浏览器支持 二重要术语 grid container网格容器 grid Item网格项 grid line 网格线 grid track网格轨道 grid cell网格单元 grid area网格区域 三所有网格容器属性和网格元素属性 四grid container 属性 display grid inline-grid subgrid grid-template-columns grid-template-rows grid-template-areas grid-template grid-column-gapgrid-row-gap grid-gapgrid-column-gap grid-row-gap justify-items align-items justify-content start end center stretch space-around space-between space-evenly align-content start end center stretch space-around space-between space-evenly grid-auto-columnsgrid-auto-rows grid-auto-flow row默认 column

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。 一、 前言铺垫 1.引言 CSS网格布局（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。 CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。 只要我们一直在制作网站，我们就一直在为解决布局问题不断探索， 而Grid是第一个专门为解决布局问题而生的CSS模块。 本文包括18个小节，50个实例，完整阅读需要时间20分钟以上。 2.重要术语 在深入了解网格的概念之前，理解术语是很重要的。 由于这里所涉及的术语在概念上都是相似的，如果不先记住它们在网格规范中定义的含义，则很容易将它们彼此混淆。 但是不用太担心，这些术语并不多。 Grid Container 设置了

（点击 上方公众号 ，可快速关注） 英文： Rachel Andrew 译文：大漠 www.w3cplus.com/css/css-grid-gotchas-stumbling-blocks.html 2017年3月，CSS Grid在几个星期内就被发送到Chrome、Firefox和Safari的生产版本中。很高兴，大家可以使用它来解决实际问题。 CSS Grid是一种不同的布局方式 ，在大家开始使用规范的时候，有很多常见的问题。这篇文章的目的是回答其中的一些问题，并且将会是Smashing Magazine中有关于CSS Grid一系列文章中的一篇。 为什么使用CSS Grid而不是CSS Flexbox？ 在CSS网格布局在浏览器中可用之前，很多人都认为Flexbox是我们所有设计相关问题的答案。然而，Flexbox并没有提供比浮动更好的网格系统，尽管它确实比浮动创建一个网格系统更简单。一个真正的网格是二维的。这两个维度就是行和列，并且使用网格布局，你可以同时控制它们。使用Flexbox，你可以选择是否将这些项列成一行或列，一个或另一个，而不是两个。 这里有一个简单的示例，突出其区别。第一个布局使用Flexbox，为了能尽可能多的使用盒子，以适合可用的宽度。这里我们控制了整个行中的布局。允许Flex项目进行包裹，因此会创建新的行，但是每一行都是一个新的Flex容器

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。 引言 CSS网格布局（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。 CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。 只要我们一直在制作网站，我们就一直在为解决布局问题不断探索， 而Grid是第一个专门为解决布局问题而生的CSS模块。 有两个东西，启发我写这篇指南。 第一个是雷切尔·安德鲁（Rachel Andrew）的书为 CSS Grid布局准备 。 这本书对网格布局做了彻底、清晰的介绍，也是是整篇文章的基础，我强烈建议你购买并阅读他的书。 我的另一个重要灵感是 Chris Coyier的Flexbox完全指南 ，当需要查阅 flexbox

GRID 新手入门 原文来自 IBM developerWorks ( http://www.ibm.com/developerworks/cn/grid/newto/ ) 网格计算入门 许多对网格计算感兴趣的读者都会问一些非常基本的问题： * 从哪里开始？ * 如何使用这些资料？ * 如何把这些资料串到一起？ * 我该如何适应网格计算？ * 是否已经有网格项目可以参与？ 这正是这样一份指南，指导您学习网格技术提供的令人激动的优点。本文在适当的上下文环境中介绍了网格计算的基本概念，并把相关的 developerWorks 文章、教程、技巧、 IBM 学习服务教育、研讨会和 IBM 产品串联到一起，供日后深入研究。本文以一种直观的框架介绍网格计算，尝试整合多方资料，同时突出重点。 如果您感觉这些还不够，那就对了。因为网格领域正在迅速发展。网格计算拥有扎实的学术研究基础，并被稳健地运用到商业应用中。标准、框架、实现和应用程序的改变日新月异。当前的网格计算也许会让您想起从前的 Web ，或者 XML 和 Web 服务的出现，它们一开始发展也都非常缓慢。但是与这些技术领域一样，一旦稳定的标准和工具的产生，并且相互融合，那么我们可以预测网格计算领域就会快速成长。因此，我们撰写了这份指南，让开发人员可以有一个基础来了解网格技术了。 什么是网格计算 ? 由于网格计算是一种新兴的技术