[分享]css7.1怎样生成横断图

CSS 7.1如何生成横断图
横断图（cross-axis）是指在网格布局（grid）中，垂直于主轴（main-axis）的方向。在CSS 7.1中，我们可以使用grid-template-rows和grid-template-columns属性来定义行和列。以下是一个简单的示例：

html
<div class="grid">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div> 

css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}
<br>
.item {
  background: #333;
  color: #fff;
  padding: 1rem;
  font-size: 3rem;
} 

在这个示例中，我们设置了一个拥有6个子元素的网格布局，每行和每列都有3个项目，并且有10像素的间距。
接下来，让我们添加一些样式，使它成为一个横断图。

css
.item1 {
  grid-row: 1 / span 2;
}
<br>
.item4 {
  grid-row: 2 / span 2;
} 

在这里，我们使用grid-row属性来将第1个项目（item1）放置在网格的第一行，并横跨两行。同样地，我们使用grid-row属性将第4个项目（item4）放置在网格的第二行，并横跨两行。
在这个例子中，我们使用了span值来让项目跨越格子。span表示项目要跨越的单元格数，值可以是任何整数。
运行这段代码，你将会看到6个项目被放置在网格布局中，其中第1个和第4个项目横跨了两行。这个网格布局的横断图已经成功地生成了！
总结
横断图是网格布局中一个常见的布局模式，通过CSS 7.1中的grid-template-rows和grid-template-columns属性，我们可以轻松地定义行和列，并使用grid-row属性来控制项目在网格中的位置。通过这种方式，我们可以很容易地在网格布局中创建复杂的布局和设计。