Question

我正在尝试使用display:grid制作HTML布局，但它无效。我想要一个2列3行的布局。谁能告诉我我做错了什么？

这是我使用的简化HTML代码。我添加了一个printcreen来显示结果。

<!DOCTYPE html>
<html>
    <head>

        <style>
            #Main {
                display:grid;
                grid-columns:75% 25%;
                grid-rows:20% 70% 10%;
            }

            #Main > header {
                grid-column: 1;
                grid-row:1;
                grid-column-span:2;
                background-color:red;
            }

            #Main > section {
                grid-column:1;
                grid-row:2;
                background-color:yellow;
            }

            #Main > aside {
                grid-column:2;
                grid-row:2;
                grid-row-span:2;
                background-color:green;             
            }

            #Main > footer {
                grid-column: 1;
                grid-row:3;
                grid-column-span:2;
                background-color:blue;
            }
        </style>

    </head>

    <body>
        <div id="Main">

            <header>
                header
            </header>

            <section>
                section
            </section>

            <aside>
                aside
            </aside>  

            <footer>
                footer
            </footer>
        </div>
    </body>

</html>

enter image description here

display：grid CSS3布局不起作用

0 个答案: