如何使网格项跨越两行单元格的 100% 高度

问题描述 投票：0回答：1

我正在研究一个网格，其中前两个单元格从第 1 行跨越到第 2 行。但是它们并没有跨越整个高度。这里的任何项目都没有应用高度，一切都是自动的。

Image of grid

我猜这就是它不扩展的原因？是否必须在此处设置元素的高度才能使其展开，或者是否有解决方法可以使项目展开并覆盖整个空间？

当使用“grid-column: 1 / 3”使单元格跨度为两列时，此方法有效，但不适用于“grid-row: 1 / 3”

抱歉，我无法提供代码片段，因为这是针对客户的。

html css css-grid
1个回答
0
投票

要使网格项跨越两行并占据整个高度，可以使用 

grid-row
属性。以下是使用 CSS 网格实现此目的的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px); /* Set the row height */
            grid-gap: 10px;
        }

        .grid-item:first-child {
            grid-column: 1 / 3; /* Span 2 columns */
            grid-row: 1 / 3;    /* Span 2 rows */
            /* Additional styling for demonstration purposes */
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">A</div>
        <div class="grid-item">B</div>
        <div class="grid-item">C</div>
        <div class="grid-item">D</div>
        <div class="grid-item">E</div>
        <div class="grid-item">F</div>
    </div>
</body>
</html>

在上面的例子中：

  • .grid-container
    定义三列三行的网格布局。
  • .grid-item:first-child
    跨越两列 (
    grid-column: 1 / 3
    ) 和两行 (
    grid-row: 1 / 3
    )，有效地占据了单元格的整个高度。

可以根据需要随意调整行高和其他样式。 🌟

您还可以使用 

span
关键字来指定元素应跨越的列数或行数，如下所示：

.grid-item:first-child {
    grid-column: 1 / span 2; /* Span 2 columns */
    grid-row: 1 / span 2;    /* Span 2 rows */
}

请记住根据您的特定项目调整类名称和样式！ 😊

链接

(1) 如何创建一个跨2列2行的CSS网格布局框？ 如何创建跨 2 列和 2 行的 CSS 网格布局框？。 (2) 使用 grid-area 将一个元素跨越多个 CSS 网格单元。 https://www.js-craft.io/blog/using-grid-area-to-span-an-element-across-multiple-css-grid-cells/。 (3) CSS 网格布局 - W3Schools。 https://www.w3schools.com/css/css_grid.asp。 (4) github.com。 https://github.com/reverse-wisdom/TIL/tree/9e04dc0aadf6e59f7d6af7ae8af36116e42d07fe/HTML%2CCSS%2FHTML%2F20200109_%5BCSS%5D_gride-template-columns_rows.md。 (5) github.com。 https://github.com/irissooa/css-sass/tree/08f11e72510352519764e07535a7a73fbb67ce87/til%2FCSS_Flex_Grid.md.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.