码迷，mamicode.com
首页 > Web开发 > 详细

未来的CSS3布局方式 ，GRID 栅格系统-2 -cyy

时间：2020-11-10 11:20:17      阅读：29      评论：0      收藏：0      [点我收藏+]

标签：height   play   child   src   lang   tar   load   image   tle   

重复栅格的命名技巧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article:nth-of-type(1){
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:repeat(3,[r-start] 1fr [r-end]);
            grid-template-columns:repeat(3,[c-start] 1fr [c-end]);
        }
        article>div{
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-box;
        }
        article>div:first-of-type{
            grid-row-start:r-start 1;
            grid-row-end:r-end 1;
            grid-column-start:c-start 1;
            grid-column-end:c-end 3;

            grid-row-start:r-start 2;
            grid-row-end:r-end 2;
            grid-column-start:c-start 2;
            grid-column-end:c-end 2;
        }

    </style>
</head>
<body>
    <article>
        <div>1</div>
    </article>
</body>
</html>

技术图片

 

 

根据偏移量定位元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article:nth-of-type(1){
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:repeat(3,1fr);
            grid-template-columns:repeat(3,1fr);
        }
        article>div{
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-box;
        }
        article>div:first-of-type{
            /* 加上span代表偏移量，而不是结束位置 */
            /* grid-column-end:span 3;
            grid-row-start:2;
            grid-row-end:span 1; */

            grid-row-start:2;
            grid-row-end:span 1;
            grid-column-start:2;
            grid-column-end:span 1;
        }

    </style>
</head>
<body>
    <article>
        <div>1</div>
    </article>
</body>
</html>

技术图片

 

 

元素定位简写操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article:nth-of-type(1){
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:repeat(3,1fr);
            grid-template-columns:repeat(3,1fr);
        }
        article>div{
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-box;
        }
        article:nth-of-type(1)>div:first-of-type{
            grid-row:3/4;
            grid-column:3/4;

            grid-row:2/3;
            grid-column:2/3;

            grid-row:1/span 1;
            grid-column:2/span 1;
        }

        article:nth-of-type(2){
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:repeat(2,1fr);
            grid-template-columns:repeat(2,1fr);
        }
        article:nth-of-type(2)>div:first-of-type{
            grid-row:1/3;
            grid-column:1/2;
        }

    </style>
</head>
<body>
    <article>
        <div>1</div>
    </article>

    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </article>
</body>
</html>

技术图片

 

 

开发bootstrap栅格系统：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            width:1020px;
            margin:0 auto;
        }
        .row{
            display:grid;
            grid-template-columns:repeat(12,1fr);
        }
        .col-1{
            grid-column-end:span 1;
        }
        .col-2{
            grid-column-end:span 2;
        }
        .col-3{
            grid-column-end:span 3;
        }
        .col-4{
            grid-column-end:span 4;
        }
        .col-5{
            grid-column-end:span 5;
        }
        .col-6{
            grid-column-end:span 6;
        }
        [class^=‘col-‘]{
            background:pink;
            border:1px solid pink;
            padding:10px;
            box-sizing:border-box;
            background-clip:content-box;
        }
    </style>
</head>
<body>
    <article class="container">
        <div class="row">
            <div class="col-1"></div>
            <div class="col-6"></div>
            <div class="col-5"></div>
        </div>
    </article>
</body>
</html>

技术图片

 

 

使用栅格区域部署元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:repeat(3,1fr);
            grid-template-columns:repeat(3,1fr);
        }
        div{
            background:pink;
            /* 行的开始/列的开始/行的结束/列的结束 */
            grid-area:2/2/2/2;

            grid-area:3/2/3/2;
        }
        
    </style>
</head>
<body>
    <article>
        <div></div>
    </article>
</body>
</html>

技术图片

 

 

区域命名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:repeat(3,[r] 1fr);
            grid-template-columns:repeat(3,[c] 1fr);
        }
        div{
            background:pink;
            /* 行的开始/列的开始/行的结束/列的结束 */
            grid-area:r 2/c 2/r 3/c 3;
        }
        
    </style>
</head>
<body>
    <article>
        <div></div>
    </article>
</body>
</html>

 

栅格区域布局真的太好用了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:100vwx;
            height:100vh;

            display:grid;
            grid-template-rows:60px 1fr 60px;
            grid-template-columns:60px 1fr;
            grid-template-areas:"header header"
            "nav main"
            "footer footer";
        }
        article *{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:content-box;
            background-clip:content-box;
        }
        header{
            grid-area:header;
        }
        nav{
            grid-area:nav;
        }
        main{
            grid-area:main;
        }
        footer{
            grid-area:footer;
        }
        
    </style>
</head>
<body>
    <article>
        <header></header>
        <nav></nav>
        <main></main>
        <footer></footer>
    </article>
</body>
</html>

技术图片

 

 

使用栅格区域命名自定义部署元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:100vwx;
            height:100vh;

            display:grid;
            grid-template-rows:60px 1fr 60px;
            grid-template-columns:60px 1fr;
            grid-template-areas:"header header"
            "nav main"
            "footer footer";
        }
        article *{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:content-box;
            background-clip:content-box;
        }
        header{
            grid-area:header-start/header-start/main-end/main-end;
        }
        footer{
            grid-area:footer;
        }
        
    </style>
</head>
<body>
    <article>
        <header></header>
        <footer></footer>
    </article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:100vwx;
            height:100vh;

            display:grid;
            grid-template-rows:60px 1fr 60px;
            grid-template-columns:60px 1fr;
            grid-template-areas:"logo header"
            "nav main"
            "footer footer";
        }
        article *{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:content-box;
            background-clip:content-box;
        }
        header{
            grid-area:logo-start/logo-start/nav-end/logo-end;

            grid-area:header-end/main-start/main-end/main-end;
        }
        footer{
            grid-area:footer;
        }
        
    </style>
</head>
<body>
    <article>
        <header></header>
        <footer></footer>
    </article>
</body>
</html>

技术图片

 

 

使用区域占位符优化布局代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:100vwx;
            height:100vh;

            display:grid;
            grid-template-rows:60px 1fr 60px;
            grid-template-columns:60px 1fr;
            grid-template-areas:". ."
            ". ."
            "footer footer";
        }
        article *{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:content-box;
            background-clip:content-box;
        }
        footer{
            grid-area:footer;
        }
        
    </style>
</head>
<body>
    <article>
        <div>logo</div>
        <div>nav</div>
        <div>aside</div>
        <div>main</div>
        <footer>footer</footer>
    </article>
</body>
</html>

技术图片

 

 

栅格流动处理机制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:300px;

            display:grid;
            grid-template-rows:repeat(3,1fr);
            grid-template-columns:repeat(3,1fr);

            /* 默认行排列 */
            grid-auto-flow:row;
            /* 列排列 */
            grid-auto-flow:column;
        }
        div{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:content-box;
            background-clip:content-box;
        }
        
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </article>
</body>
</html>

技术图片

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:300px;

            display:grid;
            grid-template-rows:repeat(3,1fr);
            grid-template-columns:repeat(3,1fr);

            /* dense 后面的元素会自动把空间填满 */
            grid-auto-flow:row dense;
        }
        div{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:content-box;
            background-clip:content-box;
        }
        div:first-child{
            grid-column:span 2;
        }
        div:nth-child(2){
            grid-column:2/span 1;
        }
        
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </article>
</body>
</html>

技术图片

 

 

栅格整体对齐方式处理：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:100px;
            border:1px solid red;

            display:grid;
            grid-template-columns:repeat(4,50px);
            justify-content:space-evenly;
            align-content:center;
        }
        div{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:border-box;
            background-clip:content-box;
            height:50px;
        }
        
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </article>
</body>
</html>

技术图片

 

 

栅格内元素的整体控制技巧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:75px;
            border:1px solid red;

            display:grid;
            grid-template-columns:repeat(4,75px);

            justify-items:start;
            align-items:start;

            justify-items:end;
            align-items:end;

            /* 默认就是拉伸效果，如果元素设置过宽高则无效 */
            justify-items:stretch;
            align-items:stretch;

            justify-items:center;
            align-items:center;
        }
        div{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:border-box;
            background-clip:content-box;
        }
        
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </article>
</body>
</html>

技术图片

 

 

栅格元素独立控制对齐方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:75px;
            border:1px solid red;

            display:grid;
            grid-template-columns:repeat(4,75px);

            justify-items:start;
            align-items:start;

            justify-items:end;
            align-items:end;

            /* 默认就是拉伸效果，如果元素设置过宽高则无效 */
            justify-items:stretch;
            align-items:stretch;

            justify-items:center;
            align-items:center;
        }
        div{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:border-box;
            background-clip:content-box;
        }
        div:first-child{
            justify-self:start;
            align-self:start;

            justify-self:end;
            align-self:end;

            justify-self:center;
            align-self:end;

            justify-self:stretch;
            align-self:stretch;
        }
        
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </article>
</body>
</html>

技术图片

 

 

组合简写栅格对齐方式：

【栅格简写】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:75px;
            border:1px solid red;

            display:grid;
            grid-template-columns:repeat(4,60px);

            justify-content:space-evenly;
            align-content:center;

            /* 简写，先align-content，再justify-content */
            place-content:center space-evenly;
        }
        div{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:border-box;
            background-clip:content-box;
            height:50px;
        }
        div:first-child{
        }
        
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </article>
</body>
</html>

技术图片

 

 

【栅格内的所有元素进行定义】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:75px;
            border:1px solid red;

            display:grid;
            grid-template-columns:repeat(4,75px);

            justify-items:start;
            align-items:center;

            place-items:center end;
        }
        div{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:border-box;
            background-clip:content-box;
        }
        div:first-child{
        }
        
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </article>
</body>
</html>

技术图片

 

 

【单个元素进行简写】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        article{
            width:300px;
            height:75px;
            border:1px solid red;

            display:grid;
            grid-template-columns:repeat(4,75px);

            justify-items:start;
            align-items:center;

            place-items:center end;
        }
        div{
            border:1px solid pink;
            background:pink;
            padding:10px;
            box-sizing:border-box;
            background-clip:content-box;
        }
        div:first-child{
            justify-self:end;
            align-self:end;

            place-self:start center;
        }
        
    </style>
</head>
<body>
    <article>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </article>
</body>
</html>

技术图片

 

 

注意：align控制交叉轴，justify控制主轴；

-content 控制栅格

-items 控制栅格里的所有元素

-self 控制栅格里的某个元素

未来的CSS3布局方式 ，GRID 栅格系统-2 -cyy

标签：height   play   child   src   lang   tar   load   image   tle   

原文地址：https://www.cnblogs.com/chenyingying0/p/13951624.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！