CSS 网格元素学习笔记

什么是CSS网格元素

CSS网格布局是一种二维网格系统，用于构建复杂的布局。网格可以定义为行和列，这些行和列一起形成一个网格。

如何定义CSS网格

我们可以使用display:grid;将一个元素设置为网格容器。

然后，我们可以使用grid-template-columns和grid-template-rows属性来定义网格中的列和行。例如：

Copy Code
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
}

这将创建一个具有三列和两行的网格。每个列的宽度为100像素，每个行的高度为50像素。

如何在CSS网格中定位元素

我们可以使用grid-column和grid-row属性来指定元素所占据的列和行。例如：

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

这将使元素占据第二列到第四列和第一行到第二行之间的所有单元格。

示例

下面是一个简单的网格布局示例：

Copy Code
<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 50px 1fr 50px;
    grid-gap: 10px;
    height: 100vh;
  }
  .header {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    background-color: #333;
    color: white;
    text-align: center;
    line-height: 50px;
  }
  .sidebar {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background-color: #999;
    color: white;
    text-align: center;
    line-height: 50px;
  }
  .main {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: #ccc;
    color: #333;
    text-align: center;
    line-height: 300px;
  }
  .footer {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    background-color: #333;
    color: white;
    text-align: center;
    line-height: 50px;
  }
</style>

这将创建一个具有两个列和三个行的网格，其中头部、侧边栏、主体和页脚都被定位在网格中的不同单元格中。

总结

CSS网格布局提供了一种强大的方式来构建复杂的布局。通过使用display:grid;、grid-template-columns、grid-template-rows、grid-gap、grid-column和grid-row属性，我们可以轻松地定义具有多个行和列的网格，并定位其中的元素。