.container { display: grid; grid-template-columns: 7fr 3fr; grid-template-rows: auto; height: calc(100vh - 4rem); }固定左右大小

你可以使用 `grid-template-areas` 来指定左右两个区域的大小，例如：

.container {
  display: grid;
  grid-template-columns: 7fr 3fr;
  grid-template-areas: "left right";
  height: calc(100vh - 4rem);
}

.left {
  grid-area: left;
}

.right {
  grid-area: right;
}

然后在 HTML 中为左右两个区域分别创建对应的元素，并设置它们的 `grid-area` 属性为 `left` 和 `right`，例如：

<div class="container">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

相关问题

grid布局、格子间怎么画竖向虚线

Grid布局是一种流行的响应式网页设计技术，它基于网格系统，可以让你轻松地创建灵活的网格结构，适用于内容分布和组织。要在grid布局中添加竖向虚线，你可以利用CSS Grid的`grid-rows`属性，并结合伪元素`::before`和`::after`来实现。

例如：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
  gap: 1px; /* 设置列与行之间的间隔 */
}

.grid-container::before,
.grid-container::after {
  content: "";
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1); /* 可调整颜色透明度 */
  position: absolute;
}

/* 如果你想让虚线只显示在行上，把下面这行放在grid-template-columns前 */
.grid-container-row-divider::after {
  top: 0;
  left: calc(50% - 0.5px);
  width: calc(100% + 1px);
}

/* 如果你想让虚线只显示在列上，把上面这行替换成下面这行 */
.grid-container-col-divider::before {
  bottom: 0;
  right: calc(50% - 0.5px);
  width: calc(100% + 1px);
}

在这个例子中，`.grid-container-row-divider` 和 `.grid-container-col-divider` 类是用来分别应用于行和列的伪元素，它们会生成垂直和水平的虚线。记得根据需要调整颜色、位置和宽度等样式属性。

grid布局,三个元素,前两个元素排成一列,最后一个单独一列,最后一个元素的高度等于前面两个的总和

可以使用grid布局的grid-template-rows和grid-template-columns属性来实现你的需求。具体实现如下：

.grid-container {
  display: grid;
  grid-template-rows: auto auto; /* 前两个元素的高度自适应 */
  grid-template-columns: 1fr; /* 最后一个元素单独一列 */
}

.grid-item-1 {
  grid-row: 1 / 3; /* 前两个元素跨两行 */
}

.grid-item-2 {
  grid-row: 1 / 3; /* 前两个元素跨两行 */
}

.grid-item-3 {
  height: calc(100% - var(--grid-gap) * 2); /* 最后一个元素高度等于前面两个元素的总和 */
}

其中，--grid-gap是一个自定义变量，表示前两个元素之间的间距。你可以根据实际情况调整它的值。