解析CSS中的Grid布局完全指南

Grid 是一个基于二维网格布局的系统,有了它我们可以非常方便的实现过去很复杂布局,无需再使用 float , inline-block , position 这些本质上是 hack 的方法。 CSS网格布局擅长于将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系(前提是HTML生成了这些区域)。 它像表格一样,网格布局让我们能够按行或列来对齐元素。 然而在布局上,网格比表格更可能做到或更简单。 网格布局概念 在学习之前需要了解以下网格的几个概念。 网格轨道(Grid Tracks) 网格轨道 是两条网格线之间的空间。它们通过使用属性 grid-template-colum