display: grid;一行两个瀑布流排列 左边高300px 右边高200px怎么实现

要使用CSS Grid布局实现一行内包含两个高度不同的元素，左边高300px，右边高200px，并呈现瀑布流效果（即当屏幕宽度变窄时，元素会自动换行），你可以这样做：

首先，创建一个`grid-container`容器，设置`display: grid;`和一些基础样式，如网格行数、间距等：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 自适应列宽 */
  grid-gap: 10px; /* 网格之间的间距 */
  padding: 10px; /* 用于元素四周留白 */
}

然后，对于左侧和右侧的两个元素，分别设置`grid-column`属性，左边设为固定的宽度和优先级更高的顺序：

.left-item {
  grid-column: 1 / span 2; /* 占据两列，从第一列到第二列 */
  height: 300px; /* 高度为300px */
}

.right-item {
  grid-column: 2; /* 单独占据一列，第二列开始 */
  height: 200px; /* 高度为200px */
}

最后，给元素添加样式，比如背景色或者内部内容：

<div class="grid-container">
  <div class="left-item" style="background-color: #f0f0f0;">左侧内容</div>
  <div class="right-item" style="background-color: #eaeaea;">右侧内容</div>
  <!-- 更多的网格项可以在这里添加 -->
</div>

这样，当屏幕宽度减少时，如果不足以放下两个完整的一列宽，则会发生换行，形成瀑布流的效果。