web开发 HTML5+CSS3 2 栅格布局

于 2021-08-23 08:48:01 发布
阅读量220 收藏
点赞数
分类专栏： web 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sermisry/article/details/119802255
版权

文章目录

栅格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>“列”和“行”的定义</title>
    <style type="text/css">
        .grid-container {
            display: grid;
            padding: 10px;
            height: calc(100vh);
            grid-template-columns: 200px 50% 1fr;
            /*fr可以通俗的表示为份*/
            grid-template-rows: 33.33% 66.66%;
            background-color: lightblue;
        }

        .grid-container > div {
            text-align: center;
            padding: 10px;
            border: 1px solid white;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局演示</title>
    <style type="text/css">
        .item1 { grid-area: header; }
        .item2 { grid-area: nav; }
        .item3 { grid-area: main; }
        .item4 { grid-area: aside; }
        .item5 { grid-area: footer; }

        .grid-container {
            display: grid;
            grid-template-areas: 
                'header header header header header'
                'nav main main main aside'
                'nav footer footer footer footer';
            grid-template-columns: 1fr 3fr 2fr 1fr 1fr;
            grid-template-rows: 1fr 5fr 1fr;
            /*简写
            grid-template: 
                'header header header header header' 1fr
                'nav main main main aside' 5fr
                'nav footer footer footer footer' 1fr / 1fr 3fr 2fr 1fr 1fr;
            */
            grid-gap: 10px 20px;/*这里是行和列的间距的简写*/
            background-color: lightblue;
            padding: 10px;
        }

        .grid-container > div {
            background-color: pink;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item1">Header</div>
        <div class="item2">Nav</div>
        <div class="item3">
            <div>Section1</div>
            <div>Section2</div>
            <div>Section3</div>
            <div>Section4</div>
            <div>Section5</div>
        </div>
        <div class="item4">Aside</div>
        <div class="item5">Footer</div>
    </div>
</body>
</html>

一些关键字和函数

  1. grid-template-columns: 1fr auto 200px;
    这里的auto表示能容纳文字的最小空间剩下的都给1fr
  2. grid-template-columns: min-content max-content max-content;
    表示能容纳的最小和最大的空间
  3. grid-template-columns: repeat(3, 200px) repeat(3, auto);
  4. grid-template-columns: repeat(auto-fill, 200px);
    (填充数量, 宽度)
  5. grid-template-columns: 100px minmax(200px, 1fr) 50%;
  6. grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    auto-fill添加无内容列
    auto-fit调整每一列的宽度来适配
  7. grid-template-columns: repeat(3, fit-content(500px));
    fit-content(arg)：参数arg和最小值之间找一个合适的值*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一些关键字和函数</title>
    <style type="text/css">
        .grid-container {
            display: grid;
            padding: 10px;
            background-color: lightblue;

        .grid-container > div {
            text-align: center;
            padding: 10px;
            border: 1px solid white;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div>I am a student.</div>
        <div>I am a student.</div>
        <div>I am a student.</div>
        <div>I am a student.</div>
        <div>I am a student.</div>
        <div>I am a student.</div>
    </div>
</body>
</html>

对齐方式

简写水平垂直作用
place-contentjustify-contentalign-content整个栅格容器内的所有元素
place-itemsjustify-itemsalign-items栅格容器中元素的内容
place-selfjustify-selfalign-self对齐每个网格线中的内容(这个用于单个元素)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格布局的对齐方式</title>
    <style type="text/css">
        .item1 { grid-area: a; }
        .item2 {
        	grid-area: b;
        	justify-self: start;
        }
        .item3 { grid-area: c; }
        .item4 { grid-area: d; }
        .item5 { grid-area: e; }
        .item6 { grid-area: f; }

        .grid-container {
            display: grid;
            padding: 10px;
            grid-gap: 10px;
            grid-template: 
            'a b b c' 50px
            'a d d c' 100px
            'a e e f' 50px / 100px 100px 100px;
            height: 333px;
            /*水平方向：整个栅格容器的所有元素*/
            justify-content: center; 
            /*垂直方向*/
            /* align-content: space-around; */
            /*水平方向：对齐栅格容器中元素的内容*/
            justify-items: center;
            background-color: lightblue;
        }
        .grid-container > div {
            text-align: center;
            padding: 10px;
            border: 1px solid white;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
    </div>
</body>
</html>

栅格线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格线</title>
    <!--栅格元素不用填满整个栅格布局，
        栅格元素之间可以相互覆盖
    -->
    <style type="text/css">
        .grid-container {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 1fr);
            background-color: lightblue;
        }

        .one {
            grid-column-start: 4;
            grid-column-end: 10;
            grid-row-start: 2;
            grid-row-end: 6;
            z-index: 1;/*提高*/
        }
        .two {
            grid-column: 1 / 6;
            grid-row: 1 / 8;
            order: 1;/*修改顺序，也能起到提高的作用*/
        }
        .three {
            /*简写，和边框的顺序正好相反，是逆时针的*/
            grid-area: 5 / 2 / 10 / 5;
        }
        .four {
            grid-area: 6 / 4 / 9 / 9;
        }
        .five {
            grid-area: 5 / 8 / 11 / 11;
        }

        .grid-container > div {
            text-align: center;
            padding: 10px;
            border: 1px solid white;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
    </div>
</body>
</html>

栅格元素的放置规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格元素的放置规则</title>
    <style type="text/css">
        .grid-container {
            display: grid;
            grid-template: 
            100px
            100px
            100px / 100px 100px;
            grid-auto-flow: row dense;
            /*row表示水平 dense表示紧密排列*/
            grid-auto-columns: 100px;
            /*表示多出来的都是100px*/
        }
        .grid-container > div {
            font-size: 2em;
            text-align: center;
            height: 100px;
            line-height: 100px;
            border: 1px solid snow;
        }
        .one {
            background-color: aqua;
            grid-column: 1 / 3;
        }
        .two {
            background-color: blue; 
        }
        .three {
            background-color: green;
            grid-column: 1 / 3;
        }
        .four {
            background-color: pink;
        }
        .five {
            background-color: red;
            grid-column: 3 / 4;
        }
        .six {
            background-color: yellow;
        }
        .seven {
            background-color: lightgreen
        }
        .eight {
            background-color: tomato
        }
        .nine {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
        <div class="seven">7</div>
        <div class="eight">8</div>
        <div class="nine">9</div>
    </div>
</body>
</html>

同弹性盒布局一样，栅格元素也不受float影响

Sermiscry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值