假设我们在一行中有 5 个元素,并且任务是将一个更大的元素放在一行的中间。如何在 CSS 的帮助下使 DIV 跨越网格的 2 行。
方法一:先获取 ID(‘outer’)的外层 DIV 的高度。我们知道现在可以使用带有flex-direction: column和flex-wrap: wrap 的CSS Flexbox 设计外部元素的高度。容器上的固定高度告诉 flex 项目在哪里包装。
例子:
GeeksForGeeks
How to make a div span two
rows in a grid using CSS
输出:
方法二:
- 制作一个块级的外部 DIV。
- 创建一个 90px 宽度的网格列并执行 5 次。
- 行将自动创建。
- 属性喜欢。 Grip-gap是grid-row-gap和grid-column-gap 的简写。
- 大项目将从第 1 行到第 3 行
- 大项目将从网格列第 2 行到第 3 行。
例子:
GeeksForGeeks
How to make a div span two rows
in a grid using CSS
输出: