如何使网格的底部区域长到右下角？

Question

我想增加 div 文本“五”以覆盖此网格中“二和三”下方的区域。但是，除了使 div 具有“Flex:1”的属性之外，我不确定该怎么做。如果您运行下面的代码片段，您可以看到“五”仅在“二”下方。

body{
    width: 100%;
}

 
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 80%;
    margin: auto;
}
    

.Five{
    flex: 1;
    background-color: blue;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel = "stylesheet" href="styles.css">
</head>
<body>
    <div class="wrapper">
        <div class="One">One</div>
        <div class="Two">Two</div>
        <div class="Three">Three</div>
        <div class="Four">Four</div>
        <div class="Five">Five</div>
      </div>
            
</body>
</html>

Answer 1

将 grid-column: 2 / 4 添加到 .Five，这将使该元素跨越第 2 和第 3 列。

如何使网格的底部区域长到右下角？

How do I make the bottom area of my grid grow into the bottom right corner?

html

css

grid

flexbox