css3 grid阮一峰

CSS3 Grid布局是一种相对于传统布局方式而言拥有更多优势的新型布局方式。它主要是通过将布局划分为行和列来实现页面的排版。这样可以更加自由地控制页面元素的样式和位置。相比传统布局方式，CSS3 Grid布局方式更加灵活，能够更好地适应不同屏幕尺寸。

通过CSS3 Grid布局，我们可以定义网格中每一行的高度和每一列的宽度，以及每个单元格的位置和间距。除此之外，CSS3 Grid布局的另一个最大的优点是控制网格中元素的对齐方式，这可以非常方便地实现元素水平居中、垂直居中等效果。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
}

.item {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  justify-self: center;
  align-self: center;
}

如上所示，我们可以通过设置“grid-template-columns”和“grid-template-rows”来定义网格的行数和列数，并且可以通过设置“grid-gap”来定义元素之间的间隙。通过“grid-column”和“grid-row”属性，我们可以轻松地指定元素的位置。而“justify-self”和“align-self”属性则可以控制元素在所在单元格中的水平和垂直对齐方式。

值得一提的是，CSS3 Grid布局的兼容性非常好，可以兼容到大多数主流的浏览器。因此，如果我们想要让我们的页面适应不同屏幕尺寸并且具备更多自由度的话，不妨试试使用CSS3 Grid布局。