css3-grid：grid 布局 / 基础使用

CSS Grid 布局是一种用于创建复杂两维布局的强大技术。以下是一个简单的例子，展示如何使用 CSS Grid 创建一个基础的布局。

HTML:

<div class="grid-container">
  <div class="grid-item1">Header</div>
  <div class="grid-item2">Navigation</div>
  <div class="grid-item3">Main content</div>
  <div class="grid-item4">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px 100px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
 
.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: rgba(255, 255, 255, 0.8);
}
 
.grid-item2 {
  grid-column-start: 1;
  grid-row-start: 2;
  background-color: rgba(255, 255, 255, 0.8);
}
 
.grid-item3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  background-color: rgba(255, 255, 255, 0.8);
}
 
.grid-item4 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  background-color: rgba(255, 255, 255, 0.8);
}

这个例子中，.grid-container 是一个网格容器，它定义了三列和两行。.grid-item1 至 .grid-item4 是网格项，它们通过 grid-placement 属性放置在特定的网格单元格中。这个简单的布局展示了如何使用 CSS Grid 创建一个有效的、复杂的布局系统。