將來的CSS3佈局方式，GRID 柵格系統-2 -cyy

時間 2020-11-16

標籤 html bootstrap ide 佈局優化網站 spa 3d code htm 欄目 CSS 简体版

原文原文鏈接

重複柵格的命名技巧：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,[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>

根據偏移量定位元素：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;
        }
        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>

元素定位簡寫操做：ide

<!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>

柵格區域佈局真的太好用了：spa

<!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>

使用柵格區域命名自定義部署元素：3d

<!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>

使用區域佔位符優化佈局代碼：code

<!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>

柵格流動處理機制：htm

<!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>