css 左右布局 grid

CSS Grid布局是CSS中的一种二维布局系统，它允许开发者将网页划分成网格，并在网格中放置元素。使用Grid布局实现左右布局相对简单，可以通过设置`grid-template-columns`属性来定义列的大小，并通过`grid-column`属性控制元素跨越的列数。

下面是一个简单的例子：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 第一列和第二列各占一半的宽度 */
}

.left-side {
  grid-column: 1 / 2; /* 从第一列的起始线到第二列的起始线之前结束 */
}

.right-side {
  grid-column: 2 / 3; /* 从第二列的起始线到第三列的起始线之前结束 */
}

在这个例子中，`.container` 是包含左右两个部分的容器，它被设置为网格布局，并定义了两列，每列占用一半的宽度。`.left-side` 和 `.right-side` 分别被放置在左右两侧，它们通过`grid-column`属性来控制跨越的列数。

使用CSS Grid布局实现左右布局时，还可以使用`grid-template-areas`属性来更直观地定义布局区域，或者使用`justify-content`和`align-content`属性来调整整个网格的内容对齐方式。