创建带有模板区域的网格

Question

我正在尝试为练习构建彩色块的布局，但我不知道如何完成它。现在我有 6 行相同大小的块。然而，下一个名为 violet 的 div 我希望是全宽和 4 行大小。这就是我想要的样子：

这是现在的 html + css 代码。它应该使用网格模板区域来完成，但我无法真正管理如何以正确的方式使用它们。

body, html {
    height: 100vh;
}

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 800px;
    height: 800px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 15px;
}

.container div {
    border-radius: 20px;
}

.red {
    background-color: rgb(199, 48, 48);
}

.lightblue {
    background-color: rgb(55, 207, 245);
}

.lightgreen {
    background-color: greenyellow;
}

.blue {
    background-color: rgb(35, 35, 121);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Grid</title>
</head>
<body>
    <div class="container">
        <!-- Row 1 -->
        <div class="red"></div>
        <div class="red"></div>
        <div class="red"></div>
        <div class="red"></div>
        <!-- Row 2 -->
        <div class="lightgreen"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <!-- Row 3 -->
        <div class="lightgreen"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <!-- Row 4 -->
        <div class="lightgreen"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <!-- Row 5 -->
        <div class="lightgreen"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <div class="lightblue"></div>
        <!-- Row 6 -->
        <div></div>
        <div></div>
        <div class="blue"></div>
        <div class="blue"></div>

    </div>
</body>
</html>

任何人都知道如何完成它，涉及它主要由网格模板区域构建？将不胜感激！

Answer 1

我个人使用https://cssgrid-generator.netlify.app/，尝试一下，很有用！

创建带有模板区域的网格

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

1个回答

最新问题

创建带有模板区域的网格

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

1个回答

最新问题

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