题解 | #display - grid - 区域#

display - grid - 区域

https://www.nowcoder.com/practice/020dce1079364b7dbba7b8d754f1c227

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            section {
                text-align: center;
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: repeat(3,100px);
                grid-template-areas: 'a b c''d e f''g h i';
            }
            article {
                height: 100px;
                border: 1px solid black;
            }
            article:nth-child(1) {
                grid-area: e;
            }
        </style>
    </head>
    <body>
    	<section>
            <article>1</article>
            <article>2</article>
            <article>3</article>
            <article>4</article>
            <article>5</article>
            <article>6</article>
            <article>7</article>
            <article>8</article>
            <article>9</article>
        </section>
    </body>
</html>

全部评论

相关推荐

冲芭芭拉鸭:你这图还挺新,偷了。
投递美团等公司10个岗位
点赞 评论 收藏
分享
评论
点赞
收藏
分享
牛客网
牛客企业服务