2018dw新建css

2018年，CSS推出了一项全新的功能——CSS网格布局。这项新功能可以让开发者们更加方便地进行页面布局。

使用CSS网格布局可以将页面分成多个网格，然后让元素在这些网格中进行布局。这样，可以避免使用传统盒模型布局中需要使用大量浮动、定位等属性的情况。

比如，我们可以创建一个拥有3列和3行的网格，并将元素放置于其中：

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

.item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.item-2 {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.item-3 {
  grid-column: 1 / 4;
  grid-row: 2 / 4;
}

以上代码将创建一个3x3的网格并将3个元素放置在其中。其中，元素.item-2会占据第1列的2行，而元素.item-3会占据整个第2行和第3行。

使用CSS网格布局非常方便，可以让我们更加快速、高效地进行页面布局。如果你还没有开始使用这项功能，那就赶快学习起来吧！