grid布局，随笔记录

Kevin李宏飞

于 2019-11-26 20:55:30 发布

阅读量96

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_35017350/article/details/103265011

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;  /*列*/
            grid-template-rows: 80px 120px 50px;   /*行*/
        }
        .container {
            display: grid;
            grid-template-columns: repeat(3, 33.33%);   /*分为3列 每列宽度为33.33%*/
            grid-template-rows: repeat(2, 50px);   /*两行  每行高度为50px*/
        }
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, 100px);
        }
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .container {
            display: grid;
            grid-template-columns: 150px 1fr 2fr;
        }
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr minmax(100px, 1fr);
        }
        .container {
            display: grid;
            grid-template-columns: 100px auto 100px;
        }
        .container {
            display: grid;
            grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
            grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
        }
        /*.container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-auto-rows: 50px;
        }*/
    </style>
</head>
<body>
<div class="container">
    <div style="background-color: #00a0e9">
        <div><p>123456</p></div>
    </div>
    <div style="background-color: red">2</div>
    <div style="background-color: #e1f3d8">3</div>
    <div style="background-color: green">4</div>
    <div style="background-color: violet">5</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
    <div style="background-color: antiquewhite">6</div>
</div>
<p>123456</p>
</body>
</html>