如何使用 CSS 网格跨越行和列？

网格中的跨行、跨列 Div

基于在网格中垂直扩展 div 的问题，我们现在探索更复杂的挑战：同时跨越行和列。在五个元素的行中，我们如何策略性地将较大的元素放置在中心？

非理想方法

将元素浮动到一边是固有的结果float 属性的行为。此外，HTML 表格和 CSS 网格布局在这里都不是可行的解决方案。

浏览器兼容性

CSS 网格提供了无缝解决方案，但浏览器支持历来受到限制。然而，最近主要浏览器的更新已经使网格布局完全可用。

CSS 网格解决方案

网格布局提供了一个优雅的解决方案。无需更改 HTML、嵌套容器或设置固定高度：

<code class="css">#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  width: 516px;
}</code>

要跨越特定的行和列：

<code class="css">.tall {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

.wide {
  grid-row: 2 / 4;
  grid-column: 3 / 5;
}</code>

通过定义开始和结束的行和列，我们可以精确控制网格内div的大小和位置，实现所需的布局。

以上是如何使用 CSS 网格跨越行和列？的详细内容。更多信息请关注PHP中文网其他相关文章！