grid-template-areas合并单元格和想象中为什么不一样呢-慕课网

1回答

西门老舅 2021-08-29 21:17:01

同学你好，你说的代码在哪里？

我只看到了

Document

0 回复有任何疑惑可以回复我~

收起回答

提问者怒焰狂暴 #1

<!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>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background: pink;
            display:grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas:
            "a1 a1 a2"
            "a1 a1 a2"
            "a2 a2 a2";
        }
        .main div{
            background:skyblue;
        }
        .main div:nth-of-type(1){
            grid-area:a1;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>
以下这段代码

回复有任何疑惑可以回复我~ 2021-08-29 21:29:05

西门老舅回复提问者怒焰狂暴 #2

因为合并网格的前提条件是矩形，你这样命名，a2区域不是矩形，所以必然有问题的。

回复有任何疑惑可以回复我~ 2021-08-29 22:34:35

grid-template-areas合并单元格和想象中为什么不一样呢

正在回答回答被采纳积分+3

1回答

相似问题

请选择置顶位置

本课精华内容

多个盒子，flex-shrink以为值的时候，该如何计算呢？

为什么用p包裹news2-item-content不用div包裹

SMACSS中基础的前缀是什么？

为什么header-wrapper外面还要套个header-cotainer？

更新全局变量能批量修改吗

测试题

练习题

测试题

练习题

测试题

热搜

最近搜索清空

grid-template-areas合并单元格和想象中为什么不一样呢

正在回答 回答被采纳积分+3

1回答

相似问题

请选择置顶位置

本课精华内容

多个盒子，flex-shrink以为值的时候，该如何计算呢？

为什么用p包裹news2-item-content不用div包裹

SMACSS中基础的前缀是什么？

为什么header-wrapper外面还要套个header-cotainer？

更新全局变量能批量修改吗

测试题

练习题

测试题

练习题

测试题

正在回答回答被采纳积分+3