使用 CSS Grid 布局需要先定义一个 grid container，通过设置该容器为 display: grid，即可启用 Grid 布局模式。然后可以通过 grid-template-rows 和 grid-template-columns 属性来定义行和列的数量和大小，通过 grid-template-areas 属性来定义网格区域。另外，还可以使用 grid-column 和 grid-row 属性来指定网格元素所占用的行和列。例如：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
grid-template-areas:
"header header header"
"sidebar main main";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}在上述例子中，我们定义了一个包含两行三列的网格容器，其中第一行有三个相等的列，第二行有一个 100px 的行和一个 200px 的行。我们还指定了三个网格元素，分别是 header、sidebar 和 main，通过 grid-area 属性指定它们所占用的区域。这样就可以按照预期的布局方式来排列这些元素了。
需要注意的是，CSS Grid 布局是一项相对较新的技术，需要在浏览器中开启支持才能正常使用。在处理旧版浏览器兼容性的情况下，还需要使用其他布局方式。