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

時間 2020-11-16

標籤 html 佈局網站 spa 3d code htm blog 欄目 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{
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:repeat(3,1fr);
            grid-template-columns:repeat(3,1fr);
        }
        div{
            width:100px;
            height:100px;
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-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:nth-of-type(1){
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:100px 100px 100px;
            grid-template-columns:100px 100px 100px;
        }
        article>div{
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-box;
        }

        article:nth-of-type(2){
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:50% 50%;
            grid-template-columns:20% 20% 20% 20% 20%;
        }
        article>section{
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-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>

    <hr>
    
    <article>
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section>
    </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:100px 100px 100px;
            grid-template-columns:100px 100px 100px;
        }
        article>div{
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-box;
        }

        article:nth-of-type(2){
            width: 300px;
            height:100px;
            border:1px solid red;
            display:grid;
            /* grid-template-rows:50% 50%;
            grid-template-columns:20% 20% 20% 20% 20%; */

            /* repeat(分幾格，每格佔百分之多少) */
            grid-template-rows:repeat(2,50%);
            grid-template-columns:repeat(5,20%);
        }
        article>section{
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-box;
        }

        article:nth-of-type(3){
            width: 300px;
            height:100px;
            border:1px solid red;
            display:grid;
            /* 第一行高100px，第二行高50px。重複2遍 */
            grid-template-rows:repeat(2,100px 50px);
            grid-template-columns:repeat(5,20%);
        }
    </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>

    <hr>

    <article>
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section>
    </article>

    <hr>

    <article>
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
        <section>6</section>
        <section>7</section>
        <section>8</section>
        <section>9</section>
        <section>10</section>
        <section>11</section>
        <section>12</section>
        <section>13</section>
        <section>14</section>
        <section>15</section>
        <section>16</section>
        <section>17</section>
        <section>18</section>
        <section>19</section>
        <section>20</section>

    </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:nth-of-type(1){
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            /* 自動填充 */
            grid-template-rows:repeat(auto-fill,100px);
            grid-template-columns:repeat(auto-fill,100px);
            /* 等比例分紅3份 */
            grid-template-rows:repeat(3,1fr);
            grid-template-columns:repeat(3,1fr);
            /* 按比例劃分 */
            grid-template-rows:1fr 2fr 3fr;
            grid-template-columns:1fr 2fr 1fr;
        }
        article>div{
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-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>

minmax控制尺寸波動範圍：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:nth-of-type(1){
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:repeat(2,minmax(50px,100px));
            grid-template-columns:repeat(5,1fr);
        }
        article>div{
            padding:10px;
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-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>
        <div>10</div>
    </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:nth-of-type(1){
            width: 300px;
            height:300px;
            border:1px solid red;
            display:grid;
            grid-template-rows:repeat(2,1fr);
            grid-template-columns:repeat(5,1fr);
            /* 行間距 */
            row-gap:10px;
            /* 列間距 */
            column-gap:10px;
             /* 行列間距 */
             gap:10px;
             gap:20px 10px;
        }
        article>div{
            /* padding:10px; */
            background:pink;
            border:1px solid pink;
            background-clip:content-box;
            box-sizing:border-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>
        <div>10</div>
    </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: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;

            grid-row-start:1;
            grid-row-end:2;
            grid-column-start:1;
            grid-column-end:4;

            grid-row-start:2;
            grid-row-end:3;
            grid-column-start:1;
            grid-column-end:2;

            grid-row-start:2;
            grid-row-end:3;
            grid-column-start:2;
            grid-column-end:3;
        }

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

注意：形狀只能是矩形，不能是不規則圖形blog

小米界面不規則元素佈局：ip

<!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(2,1fr);
            grid-template-columns:repeat(2,1fr);
        }
        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:1;
            grid-row-end:3;
            grid-column-start:1;
            grid-column-end:2;
        }

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

柵格固定命名放置元素：it

<!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:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
            grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-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:r1-start;
            grid-row-end:r1-end;
            grid-column-start:c2-start;
            grid-column-end:c2-end;
        }

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