2. 程式人生 > >88.CSS---Grid 網格佈局教程

88.CSS---Grid 網格佈局教程

阿新 • • 發佈：2019-10-02

grid 相容性檢視請點此處 最新Grid相容

grid 佈局就是給父元素（容器）新增display:grid,然後使子元素（專案）改變佈局，

1 2 3 4 5 6 7 8 9

上面九個正方形的程式碼如下：沒有給正方形設定寬度，是為了方便觀察css效果

.seven{

background:#f1c40f;

line-height:100px;

color:#fff;

font-size: 40px;

text-align: center;

}

 

1.grid-template-columns 屬性 | grid-template-rows
 屬性

 

grid-template-columns 定義每一列的列寬

grid-template-rows 定義每一行的行高

單位有：fr(分數)、%、px

.section-one-1{

width:400px;

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 1fr 1fr 1fr;

}

把九個宮格分成了三行三列，每一個專案的空間佔1/3*1/3=1/9

123456789

如果容器的寬度沒有限定，就會以容器最大的寬度來等比例排列

.section-one-2{

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 1fr 1fr 1fr;

}

123456789

 

2.如果要使容器內專案居中，則可使用justify-items屬性|align-items 屬性|place-items 屬性

 

justify-items屬性設定單元格內容的水平位置（左中右 預設）start | center | end | stretch;

align-items屬性設定單元格內容的垂直位置（上中下 預設）start | center | end | stretch;

place-items屬性是align-items屬性和justify-items 屬性的合併簡寫形式。

place-items: align-items(start) justify-items(end)

當容器寬度大於專案的集合寬度，當容器高度大於專案的集合高度，專案會自動居中在每兩列之間，如下程式碼

.section-two-1 {

display: grid;

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

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

place-items: center center;

height:500px;

}

123456789

 

3.grid-row-gap 屬性|grid-column-gap 屬性|grid-gap 屬性

 

grid-row-gap 屬性設定行與行的間隔（行間距）

grid-column-gap 屬性設定列與列的間隔（列間距）

grid-gap屬性是grid-row-gap和grid-column-gap的合併簡寫形式

grid-gap: grid-row-gap grid-column-gap

.section-three-1{

display: grid;

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

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

grid-row-gap: 20px;

grid-column-gap: 30px;

}

123456789

4.grid-template-areas屬性 |grid-area屬性

網格佈局允許指定"區域"（area），一個區域由單個或多個單元格組成。grid-template-areas屬性用於定義區域

這個屬性需要搭配專案（兒子）的grid-area屬性使用

grid-area屬性指定專案放在哪一個區域。

.section-four-1{

display: grid;

grid-template-columns: 150px 150px 150px;

grid-template-rows:150px 150px 150px;

grid-template-areas:"header header header"

"header header header"

"two three four";

}

.section-four-1>span:first-child{

grid-area: header;

}

.section-four-1>span:nth-child(2){

grid-area: two;

}

.section-four-1>span:nth-child(3){

grid-area: three;

}

.section-four-1>span:last-child{

grid-area: four;

}

234

5.repeat() 函式

repeat 函式作用在可以把重複的簡寫，程式碼如下。第一個引數為重複的次數，第二個引數是重複的數值

.section-five-1{

width:500px;

display: grid;

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

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

}

123456789

repeat()重複某種模式也是可以的。

如下圖定義了6列，第一列和第四列的寬度為100px，第二列和第五列為220px，第三列和第六列為1fr。

.section-five-2{

display: grid;

grid-template-columns:repeat(2,100px 220px 1fr);

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

}

123456789

6.minmax(min,max) 函式

minmax(min,max) 函式產生一個長度範圍，表示長度就在這個範圍之中。它接受兩個引數，分別為最小值和最大值。

.section-six-1{

display: grid;

grid-template-columns:1fr 1fr minmax(50px, 100px);

grid-template-rows: 1fr 1fr minmax(50px, 150px);

}

123456789

7.grid-auto-flow 屬性

grid-auto-flow屬性決定，預設值是row，即"先行後列"。也可以將它設成column，變成"先列後行"。

.section-seven-1{

display: grid;

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

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

grid-auto-flow: column;

}

123456789

8.justify-content屬性|align-content屬性|place-content屬性

justify-content屬性是整個內容區域在容器裡面的水平位置（左中右）start | end | center | stretch | space-around | space-between | space-evenly;

align-content屬性是整個內容區域的垂直位置（上中下）start | end | center | stretch | space-around | space-between | space-evenly;

place-content屬性：align-content justify-content

justify-content屬性值只能體現在grid-template-columns中某一個值為auto才會有效果。如下

.section-eight-1{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content: start;

}

123456789

justify-content:stretch;恢復預設情況。如下

.section-eight-2{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content:stretch;

}

123456789

justify-content:space-around;每個專案兩側的間隔相等。所以，專案之間的間隔比專案與容器邊框的間隔大一倍。如下

.section-eight-3{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content:space-around;

}

123456789

justify-content:space-between;專案與專案的間隔相等，專案與容器邊框之間沒有間隔。如下

.section-eight-4{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content:space-between;

}

123456789

justify-content:space-evenly;專案與專案的間隔相等，專案與容器邊框之間也是同樣長度的間隔。如下

.section-eight-5{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content:space-evenly;

}

123456789

align-content屬性和justify-content屬性是一樣的

9. grid-column-start 屬性 | grid-column-end 屬性

grid-row-start 屬性 | grid-row-end 屬性

這些屬性定義在專案上面.

grid-column-start屬性：左邊框所在的垂直網格線

grid-column-end屬性：右邊框所在的垂直網格線

grid-row-start屬性：上邊框所在的水平網格線

grid-row-end屬性：下邊框所在的水平網格線

.section-nine-1{

width:400px;

display:grid;

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

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

}

.section-nine-1>span:first-child{

grid-column-start: 2;

grid-column-end: 4;

}

1號專案的左邊框是第二根垂直網格線，右邊框是第四根垂直網格線。如下

123456789

上圖中，只指定了1號專案的左右邊框，沒有指定上下邊框，所以會採用預設位置，即上邊框是第一根水平網格線，下邊框是第二根水平網格線。

下面的例子是指定四個邊框位置的效果。

1號專案的左邊框是第1根垂直網格線，右邊框是第3根垂直網格線。上邊框是第2根水平網格線，下邊框是第4根水平垂直線。如下

.section-nine-2{

width:400px;

display:grid;

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

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

}

.section-nine-2>span:first-child{

grid-column-start: 1;

grid-column-end: 3;

grid-row-start: 2;

grid-row-end: 4;

}

123456789

這四個屬性的值還可以使用span關鍵字，表示"跨越"，即左右邊框（上下邊框）之間跨越多少個網格。

上面程式碼表示，1號專案的左邊框距離右邊框跨越3個網格。上邊框距離下邊框跨越2個網格

.section-nine-3{

width:400px;

display:grid;

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

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

}

.section-nine-3>span:first-child{

grid-column-start:span 3;

grid-row-start:span 2;

}

123456789

grid-column 屬性 | grid-row 屬性

grid-column屬性是grid-column-start和grid-column-end的合併簡寫形式

grid-row屬性是grid-row-start屬性和grid-row-end的合併簡寫形式。

.section-nine-3>span:first-child{

grid-column-start:1/3;

grid-row:2/4;

}

.section-nine-3>span:first-child{

grid-column-start: 1;

grid-column-end: 3;

grid-row-start: 2;

grid-row-end: 4;

}

10.justify-self 屬性 | align-self 屬性 | place-self 屬性

justify-self屬性設定單元格內容的水平位置（左中右），跟justify-items屬性的用法完全一致，但只作用於單個專案。

justify-self屬性設定單元格內容的垂直位置（上中下），跟align-items屬性的用法完全一致，也是隻作用於單個專案。

place-self屬性是align-self屬性和justify-self屬性的合併簡寫形式。

如果省略第二個值，place-self屬性會認為這兩個值相等。

place-self: (align-self) (justify-self);

兩個屬性都可以取四個值。start：對齊單元格的起始邊緣。 end：對齊單元格的結束邊緣。

center：單元格內部居中。stretch：拉伸，佔滿單元格的整個寬度（預設值）。

.section-ten-1{

width:400px;

display:grid;

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

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

}

.section-ten-1>span:first-child{

justify-self: start;

}

123456789   附上原css程式碼 
header{
    margin:20px 0;
    text-align: center;
    font-size: 30px;
    color:#2ecc71;
}
.section-1{
    margin:20px 0;

}
.one{
    /*width:100px;*/
   /*height:100px;*/
    background: #1abc9c;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.two{
   /*width:100px;*/
   /*height:100px;*/
    background: #2ecc71;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.three{
   /*width:100px;*/
   /*height:100px;*/
    background: #3498db;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.four{
   /*width:100px;*/
   /*height:100px;*/
    background: #9b59b6;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.five{
   /*width:100px;*/
   /*height:100px;*/
    background:#34495e;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.six{
   /*width:100px;*/
   /*height:100px;*/
    background:#ff9966;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.seven{
    /*width:100px;*/
    /*height:100px;*/
     background:#f1c40f;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
 }
.eight{
   /*width:100px;*/
   /*height:100px;*/
    background: #e67e22;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}
.nine{
   /*width:100px;*/
   /*height:100px;*/
    background: #e74c3c;
    color:#fff;
    font-size: 40px;
    text-align: center;
    line-height:100px;
}

.section-one-1{
     width:400px;
     display:grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
 }
.section-one-2{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

}

.section-two-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    place-items: center center;
    height:500px;
}
.section-three-1{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    grid-row-gap: 20px;
    grid-column-gap: 30px;
}
.section-four-1{
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
    grid-template-areas:"header header header"
                        "header header header"
                        "two three four";
}
.section-four-1>span:first-child{
    grid-area: header;
}
.section-four-1>span:nth-child(2){
    grid-area: two;
}
.section-four-1>span:nth-child(3){
    grid-area: three;
}
.section-four-1>span:last-child{
    grid-area: four;
}
.section-five-1{
    width:500px;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
 }
.section-five-2{
     display: grid;
     grid-template-columns: repeat(2,100px 220px 1fr);
     grid-template-rows: repeat(3,1fr);
 }
.section-six-1{
    display: grid;
    grid-template-columns:1fr 1fr minmax(50px, 100px);
    grid-template-rows:1fr 1fr minmax(50px, 150px);
}
.section-seven-1{
    display: grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    grid-auto-flow: column;
}
.section-eight-1{
    display: grid;
    grid-template-columns: 150px auto 150px;
    grid-template-rows: repeat(3, 1fr);
    place-items: center center;
    height: 500px;
    justify-content: start;
}
.section-eight-2{
    display: grid;
    grid-template-columns: 150px auto 150px;
    grid-template-rows: repeat(3, 1fr);
    place-items: center center;
    height: 500px;
    justify-content: stretch;
}
.section-eight-3{
    display: grid;
    grid-template-columns: 150px auto 150px;
    grid-template-rows: repeat(3, 1fr);
    place-items: center center;
    height: 500px;
    justify-content: space-around;
}
.section-eight-4{
    display: grid;
    grid-template-columns: 150px auto 150px;
    grid-template-rows: repeat(3, 1fr);
    place-items: center center;
    height: 500px;
    justify-content: space-between;
}

.section-eight-5{
    display: grid;
    grid-template-columns: 150px auto 150px;
    grid-template-rows: repeat(3, 1fr);
    place-items: center center;
    height: 500px;
    justify-content: space-evenly;
}
.section-nine-1{
    width:400px;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
}
.section-nine-1>span:first-child{
    grid-column-start: 2;
    grid-column-end: 4;
}
.section-nine-2{
    width:400px;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
}
.section-nine-2>span:first-child{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}
.section-nine-3{
     width:400px;
     display:grid;
     grid-template-columns: repeat(3,1fr);
     grid-template-rows: repeat(3,1fr);
 }
.section-nine-3>span:first-child{
    grid-column-start: span 3;
    grid-row-start: span 2;
}
.section-ten-1{
    width:400px;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
}
.section-ten-1>span:first-child{
    justify-self: start;
}
*{
    margin:0;
    padding:0;
    font-family: '幼圓';
}
::selection{
    color:#fff;
    background: #1abc9c;
}
html::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}
html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#2ecc71),to(#27ae60));
    background: linear-gradient(to bottom,#2ecc71,#27ae60);
    border-radius: 30px;
    -webkit-box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
    box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
html::-webkit-scrollbar-track {
    background: linear-gradient(to right,#95a5a6,#95a5a6 1px,#7f8c8d 1px,#7f8c8d);
}
.container-1200{
    width:1200px;
    margin:0 auto;
}
h1{
    color:#2ecc71;
    text-align: center;
}
li{
    list-style: none;
}
span{
    display: inline-block;
}
code{
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 120%;
    background-color: pink;
    border-radius: 5px;
    margin: auto 3px;
    color:#111;
}
blockquote{
    background-color: #f5f2f0;
    padding: 1em;
    margin: 2em 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    border-width: 0.3em;
    border-color: #e0dfcc;
    border-style: solid;
    text-shadow: 0 1px white;
    overflow: auto;
}
blockquote div{
    width:39%;
    float: left;
}
blockquote img{
    width:29%;
    float: left;
}
b{
    color:red;
    font-size: 20px;
}
p{
    /*font-family: '微軟雅黑';*/
    margin:10px 0;
    font-weight:600;
    font-size: 16px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Grid 網格佈局教程</title>
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/grid.css">
</head>
<body class="container-1200">
<section>
    <header>CSS Grid 網格佈局教程</header>
    <h2>grid 相容性檢視請點此處 <a style="color:red;font-weight:800;" href="https://caniuse.com/#search=grid">最新Grid相容</a></h2>
    <p>grid 佈局就是給父元素（容器）新增<code>display:grid</code>,然後使子元素（專案）改變佈局，</p>
    <span class="one">1</span>
    <span class="two">2</span>
    <span class="three">3</span>
    <span class="four">4</span>
    <span class="five">5</span>
    <span class="six">6</span>
    <span class="seven">7</span>
    <span class="eight">8</span>
    <span class="nine">9</span>
</section>
<p>上面九個正方形的程式碼如下：沒有給正方形設定寬度，是為了方便觀察css效果</p>
<blockquote>
    <p>.seven{</p>
    <p> background:#f1c40f;</p>
    <p>line-height:100px;</p>
    <p>color:#fff;</p>
    <p>font-size: 40px;</p>
    <p> text-align: center;</p>
    <p>}</p>
</blockquote>
<section class="section-1">
    <p><h1>1.<code>grid-template-columns</code> 屬性 | <code>grid-template-rows</code> 屬性</h1></p>
    <p><code>grid-template-columns</code> 定義每一列的列寬</p>
    <p><code>grid-template-rows</code> 定義每一行的行高</p>
    <p>單位有：fr(分數)、%、px</p>
    <blockquote>
        <div>
            <p>.section-one-1{</p>
            <p>width:400px;</p>
            <p>display: grid;</p>
            <p>grid-template-columns: 1fr 1fr 1fr;</p>
            <p>grid-template-rows: 1fr 1fr 1fr;</p>
            <p>}</p>  
        </div>
        <img src="/image/grid/1.png" alt="">
    </blockquote><p>把九個宮格分成了三行三列，每一個專案的空間佔1/3*1/3=1/9</p>
    <div class="section-one-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p>如果容器的寬度沒有限定，就會以容器最大的寬度來等比例排列</p>
    <blockquote>
        <div>
            <p>.section-one-2{</p>
            <p>display: grid;</p>
            <p>grid-template-columns: 1fr 1fr 1fr;</p>
            <p>grid-template-rows: 1fr 1fr 1fr;</p>
            <p>}</p>
        </div>
        <img style="width:50%;" src="/image/grid/2.png" alt="">
    </blockquote>
    <div class="section-one-2">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>

<section class="section-1">
    <p><h1>2.如果要使容器內專案居中，則可使用<code>justify-items</code>屬性|<code>align-items</code> 屬性|<code>place-items</code> 屬性</h1></p>
    <p><code>justify-items</code>屬性設定單元格內容的水平位置（左中右 預設）<b>start | center | end | stretch</b>;</p>
    <p><code>align-items</code>屬性設定單元格內容的垂直位置（上中下 預設）<b>start | center | end | stretch</b>;</p>
    <p><code>place-items</code>屬性是<code>align-items</code>屬性和<code>justify-items</code> 屬性的合併簡寫形式。</p>
    <blockquote>
        <p>place-items: align-items(start) justify-items(end)</p>
    </blockquote>
    <p>當容器寬度大於專案的集合寬度，當容器高度大於專案的集合高度，專案會自動居中在每兩列之間，如下程式碼</p>
    <blockquote>
        <div>
            <p>.section-two-1 {</p>
            <p>display: grid;</p>
            <p>grid-template-columns: repeat(3,1fr);</p>
            <p>grid-template-rows: repeat(3,1fr);</p>
            <p>place-items: center center;</p>
            <p>height:500px;</p>
            <p>}</p>
        </div>
        <img style="width:50%;" src="/image/grid/3.png" alt="">
    </blockquote>
    <div class="section-two-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>
<section class="section-1">
    <p><h1>3.<code>grid-row-gap</code> 屬性|<code>grid-column-gap</code> 屬性|<code>grid-gap</code> 屬性</h1></p>
    <p><code>grid-row-gap</code> 屬性設定行與行的間隔（行間距）</p>
    <p><code>grid-column-gap</code> 屬性設定列與列的間隔（列間距）</p>
    <p><code>grid-gap</code>屬性是<code>grid-row-gap</code>和<code>grid-column-gap</code>的合併簡寫形式</p>
    <blockquote>
        <p>grid-gap: grid-row-gap  grid-column-gap</p>
    </blockquote>
    <blockquote>
        <div>
            <p>.section-three-1{</p>
            <p>display: grid;</p>
            <p>grid-template-columns: repeat(3,1fr);</p>
            <p>grid-template-rows: repeat(3,1fr);</p>
            <p>grid-row-gap: 20px;</p>
            <p> grid-column-gap: 30px;</p>
            <p>}</p>
        </div>
        <img style="width:61%;" src="/image/grid/4.png" alt="">
    </blockquote>
    <div class="section-three-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>
<section class="section-1">
    <h1>4.<code>grid-template-areas</code>屬性 |<code>grid-area</code>屬性</h1>
    <p>網格佈局允許指定"區域"（area），一個區域由單個或多個單元格組成。<code>grid-template-areas</code>屬性用於定義區域</p>
    <p>這個屬性需要搭配專案（兒子）的<code>grid-area</code>屬性使用</p>
    <p><code>grid-area</code>屬性指定專案放在哪一個區域。</p>
    <blockquote>
        <div>
            <p>.section-four-1{</p>
            <p>display: grid;</p>
            <p>grid-template-columns: 150px 150px 150px;</p>
            <p>grid-template-rows:150px 150px 150px;</p>
            <p><code>grid-template-areas</code>:"header header header"</p>
            <p>"header header header"</p>
             <p>"two three four";</p>
            <p>}</p>
            <p>.section-four-1>span:first-child{</p>
            <p><code>grid-area</code>: header;</p>
            <p>}</p>
            <p>.section-four-1>span:nth-child(2){</p>
            <p><code>grid-area</code>: two;</p>
            <p>}</p>
            <p>.section-four-1>span:nth-child(3){</p>
            <p><code>grid-area</code>: three;</p>
            <p>}</p>
            <p>.section-four-1>span:last-child{</p>
            <p><code>grid-area</code>: four;</p>
            <p>}</p>
        </div>
        <img style="width:50%;" src="/image/grid/5.png" alt="">
    </blockquote>
    <div class="section-four-1">
        <span class="header"><img style="width:450px;height:300px" src="/image/grid/four-1.jpg" alt=""></span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
    </div>
</section>
<section class="section-1">
    <h1>5.<code>repeat()</code> 函式</h1>
    <p>repeat 函式作用在可以把重複的簡寫，程式碼如下。第一個引數為重複的次數，第二個引數是重複的數值</p>
    <blockquote>
        <div>
            <p>.section-five-1{</p>
            <p>width:500px;</p>
            <p>display: grid;</p>
            <p>grid-template-columns: repeat(3,1fr);</p>
            <p>grid-template-rows: repeat(3,1fr);</p>
            <p>}</p></div>
        <img src="/image/grid/6.png" alt="">
    </blockquote>
    <div class="section-five-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>

    <p><code>repeat()</code>重複某種模式也是可以的。</p>
    <p>如下圖定義了6列，第一列和第四列的寬度為100px，第二列和第五列為220px，第三列和第六列為1fr。</p>
    <blockquote>
        <div>
            <p>.section-five-2{</p>
            <p>display: grid;</p>
            <p>grid-template-columns:repeat(2,100px 220px 1fr);</p>
            <p>grid-template-rows: repeat(3,1fr);</p>
            <p>}</p>
        </div>
        <img style="width:50%;" src="/image/grid/7.png" alt="">
    </blockquote>
    <div class="section-five-2">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>
<section class="section-1">
    <h1>6.<code>minmax(min,max)</code> 函式</h1>
    <p><code>minmax(min,max)</code> 函式產生一個長度範圍，表示長度就在這個範圍之中。它接受兩個引數，分別為最小值和最大值。</p>
    <blockquote>
        <div>
            <p>.section-six-1{</p>
            <p>display: grid;</p>
            <p>grid-template-columns:1fr 1fr minmax(50px, 100px);</p>
            <p>grid-template-rows: 1fr 1fr minmax(50px, 150px);</p>
            <p>}</p>
        </div>
        <img style="width:60%;" src="/image/grid/8.png" alt="">
    </blockquote>
    <div class="section-six-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>
<section class="section-1">
    <h1>7.<code>grid-auto-flow</code> 屬性</h1>
    <p><code>grid-auto-flow</code>屬性決定，預設值是row，即"先行後列"。也可以將它設成column，變成"先列後行"。</p>
    <blockquote>
        <div>
            <p>.section-seven-1{</p>
            <p>display: grid;</p>
            <p>grid-template-columns:repeat(3,1fr);</p>
            <p>grid-template-rows:repeat(3,1fr);</p>
            <p>grid-auto-flow: column;</p>
            <p>}</p>
        </div>
    </blockquote>
    <div class="section-seven-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>
<section class="section-1">
    <h1>8.<code>justify-content</code>屬性|<code>align-content</code>屬性|<code>place-content</code>屬性</h1>
    <p><code>justify-content</code>屬性是整個內容區域在容器裡面的水平位置（左中右）start | end | center | stretch | space-around | space-between | space-evenly;</p>
    <p><code>align-content</code>屬性是整個內容區域的垂直位置（上中下）start | end | center | stretch | space-around | space-between | space-evenly;</p>
    <p><code>place-content</code>屬性：align-content justify-content</p>
    <p><code>justify-content</code>屬性值只能體現在<code>grid-template-columns</code>中某一個值為auto才會有效果。如下</p>
    <blockquote>
        <div>
            <p>.section-eight-1{</p>
            <p>display: grid;</p>
            <p>grid-template-columns:150px auto 150px;</p>
            <p>grid-template-rows:repeat(3,1fr);</p>
            <p>place-items: center center;</p>
            <p>height: 500px;</p>
            <p>justify-content: start;</p>
            <p>}</p>
        </div>
        <img style="width:20%;" src="/image/grid/9.png" alt="">
    </blockquote>
    <div class="section-eight-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p><code>justify-content:stretch;</code>恢復預設情況。如下</p>
    <blockquote>
        <div>
            <p>.section-eight-2{</p>
            <p>display: grid;</p>
            <p>grid-template-columns:150px auto 150px;</p>
            <p>grid-template-rows:repeat(3,1fr);</p>
            <p>place-items: center center;</p>
            <p>height: 500px;</p>
            <p>justify-content:stretch;</p>
            <p>}</p>
        </div>
        <img style="width:50%;" src="/image/grid/10.png" alt="">
    </blockquote>
    <div class="section-eight-2">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p><code>justify-content:space-around;</code>每個專案兩側的間隔相等。所以，專案之間的間隔比專案與容器邊框的間隔大一倍。如下</p>
    <blockquote>
        <div>
            <p>.section-eight-3{</p>
            <p>display: grid;</p>
            <p>grid-template-columns:150px auto 150px;</p>
            <p>grid-template-rows:repeat(3,1fr);</p>
            <p>place-items: center center;</p>
            <p>height: 500px;</p>
            <p>justify-content:space-around;</p>
            <p>}</p>
        </div>
        <img style="width:50%;" src="/image/grid/11.png" alt="">
    </blockquote>
    <div class="section-eight-3">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p><code>justify-content:space-between;</code>專案與專案的間隔相等，專案與容器邊框之間沒有間隔。如下</p>
    <blockquote>
        <div>
            <p>.section-eight-4{</p>
            <p>display: grid;</p>
            <p>grid-template-columns:150px auto 150px;</p>
            <p>grid-template-rows:repeat(3,1fr);</p>
            <p>place-items: center center;</p>
            <p>height: 500px;</p>
            <p>justify-content:space-between;</p>
            <p>}</p>
        </div>
        <img style="width:50%;" src="/image/grid/12.png" alt="">
    </blockquote>
    <div class="section-eight-4">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p><code>justify-content:space-evenly;</code>專案與專案的間隔相等，專案與容器邊框之間也是同樣長度的間隔。如下</p>
    <blockquote>
        <div>
            <p>.section-eight-5{</p>
            <p>display: grid;</p>
            <p>grid-template-columns:150px auto 150px;</p>
            <p>grid-template-rows:repeat(3,1fr);</p>
            <p>place-items: center center;</p>
            <p>height: 500px;</p>
            <p>justify-content:space-evenly;</p>
            <p>}</p>
        </div>
        <img style="width:50%;" src="/image/grid/13.png" alt="">
    </blockquote>
    <div class="section-eight-5">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p><code>align-content</code>屬性和<code>justify-content</code>屬性是一樣的</p>
</section>
<section class="section-1">
    <h1>9. <code>grid-column-start</code> 屬性 | <code>grid-column-end</code> 屬性 </h1>
    <h1><code>grid-row-start</code> 屬性 | <code>grid-row-end</code> 屬性</h1>
    <p>這些屬性定義在專案上面.</p>
    <p><code>grid-column-start</code>屬性：左邊框所在的垂直網格線</p>
    <p><code>grid-column-end</code>屬性：右邊框所在的垂直網格線</p>
    <p><code>grid-row-start</code>屬性：上邊框所在的水平網格線</p>
    <p><code>grid-row-end</code>屬性：下邊框所在的水平網格線</p>

    <blockquote>
        <div>
            <p>.section-nine-1{</p>
            <p>width:400px;</p>
            <p>display:grid;</p>
            <p>grid-template-columns: repeat(3,1fr);</p>
            <p>grid-template-rows: repeat(3,1fr);</p>
            <p>}</p>
            <p>.section-nine-1>span:first-child{</p>
            <p>grid-column-start: 2;</p>
            <p>grid-column-end: 4;</p>
            <p>}</p>
        </div>
        <img style="width:43%;" src="/image/grid/14.png" alt="">
    </blockquote>
    <p>1號專案的左邊框是第二根垂直網格線，右邊框是第四根垂直網格線。如下</p>
    <div class="section-nine-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p>上圖中，只指定了1號專案的左右邊框，沒有指定上下邊框，所以會採用預設位置，即上邊框是第一根水平網格線，下邊框是第二根水平網格線。</p>
    <p>下面的例子是指定四個邊框位置的效果。</p>
    <p>1號專案的左邊框是第1根垂直網格線，右邊框是第3根垂直網格線。上邊框是第2根水平網格線，下邊框是第4根水平垂直線。如下</p>
    <blockquote>
        <div>
            <p>.section-nine-2{</p>
            <p>width:400px;</p>
            <p>display:grid;</p>
            <p>grid-template-columns: repeat(3,1fr);</p>
            <p>grid-template-rows: repeat(3,1fr);</p>
            <p>}</p>
            <p>.section-nine-2>span:first-child{</p>
            <p>grid-column-start: 1;</p>
            <p>grid-column-end: 3;</p>
            <p>grid-row-start: 2;</p>
            <p>grid-row-end: 4;</p>
            <p>}</p>
        </div>
        <img style="width:51%;" src="/image/grid/15.png" alt="">
    </blockquote>
    <div class="section-nine-2">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <p>這四個屬性的值還可以使用<code>span</code>關鍵字，表示"跨越"，即左右邊框（上下邊框）之間跨越多少個網格。</p>
    <p>上面程式碼表示，1號專案的左邊框距離右邊框跨越3個網格。上邊框距離下邊框跨越2個網格</p>
    <blockquote>
        <div>
            <p>.section-nine-3{</p>
            <p>width:400px;</p>
            <p>display:grid;</p>
            <p>grid-template-columns: repeat(3,1fr);</p>
            <p>grid-template-rows: repeat(3,1fr);</p>
            <p>}</p>
            <p>.section-nine-3>span:first-child{</p>
            <p>grid-column-start:span 3;</p>
            <p>grid-row-start:span 2;</p>
            <p>}</p>
        </div>
        <img style="width:31%;" src="/image/grid/16.png" alt="">
    </blockquote>
    <div class="section-nine-3">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
    <h1><code>grid-column</code> 屬性 | <code>grid-row</code> 屬性</h1>
    <p><code>grid-column</code>屬性是<code>grid-column-start</code>和<code>grid-column-end</code>的合併簡寫形式</p>
    <p><code>grid-row</code>屬性是<code>grid-row-start</code>屬性和<code>grid-row-end</code>的合併簡寫形式。</p>
    <blockquote>
        <div>
            <p>.section-nine-3>span:first-child{</p>
            <p>grid-column-start:1/3;</p>
            <p>grid-row:2/4;</p>
            <p>}</p>
            <p>.section-nine-3>span:first-child{</p>
            <p>grid-column-start: 1;</p>
            <p>grid-column-end: 3;</p>
            <p>grid-row-start: 2;</p>
            <p>grid-row-end: 4;</p>
            <p>}</p>
        </div>
    </blockquote>
</section>
<section class="section-1">
    <h1>10.<code>justify-self</code> 屬性 | <code>align-self</code> 屬性 | <code>place-self</code> 屬性</h1>
    <p><code>justify-self</code>屬性設定單元格內容的水平位置（左中右），跟<code>justify-items</code>屬性的用法完全一致，但只作用於單個專案。</p>
    <p><code>justify-self</code>屬性設定單元格內容的垂直位置（上中下），跟<code>align-items</code>屬性的用法完全一致，也是隻作用於單個專案。</p>
    <p><code>place-self</code>屬性是<code>align-self</code>屬性和<code>justify-self</code>屬性的合併簡寫形式。</p>
    <p>如果省略第二個值，<code>place-self</code>屬性會認為這兩個值相等。</p>
    <blockquote>
        <p>place-self: (align-self)  (justify-self);</p>
    </blockquote>
    <p>兩個屬性都可以取四個值。start：對齊單元格的起始邊緣。 end：對齊單元格的結束邊緣。</p>
    <p>center：單元格內部居中。stretch：拉伸，佔滿單元格的整個寬度（預設值）。</p>
    <blockquote>
        <div>
            <p>.section-ten-1{</p>
            <p>width:400px;</p>
            <p>display:grid;</p>
            <p>grid-template-columns: repeat(3,1fr);</p>
            <p>grid-template-rows: repeat(3,1fr);</p>
            <p>}</p>
            <p>.section-ten-1>span:first-child{</p>
            <p> justify-self: start;</p>
            <p>}</p>
        </div>
        <img style="width:37%;" src="/image/grid/17.png" alt="">
    </blockquote>
    <div class="section-ten-1">
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>
        <span class="four">4</span>
        <span class="five">5</span>
        <span class="six">6</span>
        <span class="seven">7</span>
        <span class="eight">8</span>
        <span class="nine">9</span>
    </div>
</section>
</body>
</html>

 

相關推薦

88.CSS---Grid 網格佈局教程

grid 相容性檢視請點此處 最新Grid相容 grid 佈局就是給父元素（容器）新增display:grid,然後使子元素（專案）改變佈局， 1 2 3 4 5 6 7 8 9 上面九個正方形的程式碼如下：沒有給正方形

CSS Grid 網格佈局

網格 網格是一個成熟的設計工具，許多現代網站佈局是基於規則網格。在本文中，我們將看看基於網格的設計，以及如何使用CSS來建立網格——兩者都通過現在的工具，和剛剛開始在瀏覽器中可用的新技術。 什麼是網格佈局？ 網格僅僅是由水平和垂直線集合建立的一個模式，我們可以根據這個模式排列我們的設計元素。它們幫助我們

CSS Grid網格佈局全攻略

  CSS Grid網格佈局全攻略 所有奇技淫巧都只在方寸之間。 幾乎從我們踏入前端開發這個領域開始，就不停地接觸不同的佈局技術。從常見的浮動到表格佈局，再到如今大行其道的flex佈局，css佈局技術一直在不斷地推陳出新。其中網格佈局(grid)作為css3的產物，它更加貼近網頁設

CSS的Grid網格佈局

Grid網格佈局 就是通過設定百分比，或者預設劃分的單位個數，來達到寬度自適應的效果 比如，頁面控制元件的寬度，設定自適應隨著顯示器的寬度的增加而增加，網頁永遠佔滿整個螢幕 .searchCo

CSS Grid 網格布局

ext 列數 現在 container tro 圖片 在哪裏 isp 一個 網格 網格是一個成熟的設計工具，許多現代網站布局是基於規則網格。在本文中，我們將看看基於網格的設計，以及如何使用CSS來創建網格——兩者都通過現在的工具，和剛剛開始在瀏覽器中可用的新技術。 什麽是網

ie10 grid 網格佈局

目前HTML5的佈局方式有很多：float，定位，彈性佈局，分欄等。而在移動開發中，需要考慮到佈局能夠適應到不同的裝置、方向和螢幕尺寸，可能還需要一些結構的更改：    網格佈局是一種新的佈局方法，該方法使你能夠基於固定數量、瀏覽器視窗中的可用空間或二者組合劃分網頁主要區域的

grid網格佈局使用

## 定義 grid佈局是指對網頁進行劃分成一個一個網格，然後根據自己的要求，可以任意組合。 ![](https://user-gold-cdn.xitu.io/2020/7/29/1739979e6dd7a691?w=215&h=164&f=png&s=6967) 以前寫類

CSS網格佈局（Grid）完全教程

本文譯自《A Complete Guide to Grid》。由於譯者水平有限，如有錯誤，請不吝指正。文中所有圖的版權歸原作者所有。 導語：CSS網格佈局是目前CSS中可用的最強大的佈局系統。它是二維繫統，即可以處理行和列，不像flexbox只是一維繫統。我們

css網格佈局Grid

  記錄一下grid佈局的應用，因為在日常工作中，運用element-ui的關係，導致grid佈局並不是運用特別多，本身這類ui就已經在實現上運用到了，但是還是需要知道如何使用。 <div class="par-grid"> <div class="

CSS Grid 佈局完全指南(圖解 Grid 詳細教程)

CSS Grid 佈局是 CSS 中最強大的佈局系統。與 flexbox 的一維佈局系統不同，CSS Grid 佈局是一個二維佈局系統，也就意味著它可以同時處理列和行。通過將 CSS 規則應用於 父元素 (成為 Grid Container 網格容器)和其 子元素（成

第四篇部落格 CSS Grid 佈局基礎

wcphahaha   CSS Grid 佈局基礎 grid 關鍵詞解釋   grid-template-columns: repeat(3,

css grid 佈局 ( 入門 )

簡介：      Grid是一個強大的規範，當與CSS的其他部分（如flexbox）結合使用時，可以幫助您建立以前不可能在CSS中構建的佈局（二維佈局）。這一切都是通過在網格容器上建立一個網格來開始的。網格元素的子集 預設會有16px的padding值 使用&n

【前端】CSS佈局問題之網格佈局

對於一個偶爾需要寫寫前端介面的我來說，今天瞭解到了HTML前端可以用網格佈局之後，整個人都輕鬆起來了。在基於C#做手持裝置開發和安卓應用程式裡，都常用網格來進行佈局。而在網頁前端，我幾乎都是用用Bootstrap這種框架來設定佈局，對於基礎的CSS控制樣式還能搞定，但是涉及到佈局，就一頭

使用 CSS Grid 實現表單佈局的優勢

表單佈局和設計一直是網頁設計和開發中令人頭疼的一部分。 嘗試過寫 <select> 標籤的樣式，或者在所有瀏覽器中都居中一個 label 的人感觸肯定更深。 原文連結：https://www.sitepoint.com/css-grid-web-form-layout

CSS-Flex 佈局教程：例項篇

參考文章：Flex 佈局教程：例項篇 一、骰子的佈局 骰子的一面，最多可以放置9個點。 下面，就來看看Flex如何實現，從1個點到9個點的佈局。 如果不加說明，本節的HTML模板一律如下。 <div class="box"> &

Flex 佈局教程：語法篇 作者： 阮一峰 日期： 2015年7月10日 網頁佈局（layout）是 CSS 的一個重點應用。 佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + po

網頁佈局（layout）是 CSS 的一個重點應用。 佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡

【CSS】css grid 佈局

css grid佈局出來很久了，可以翻譯成柵欄佈局，或者網格佈局，看到了一個很好的應用，所以寫下此篇基礎教程。 比如我們要達到下面這樣一個效果要怎麼做？ 圖中有16個元素，我們要其自適應寬度，按照我們以前的想法肯定是直接通過media，媒體查詢來完成這個，但是程式碼肯定不會簡潔，但是我們

css基礎精華---Flex 佈局教程：例項篇

上一篇文章介紹了Flex佈局的語法，今天介紹常見佈局的Flex寫法。 你會看到，不管是什麼佈局，Flex往往都可以幾行命令搞定。 一、骰子的佈局 骰子的一面，最多可以放置9個點。 下面，就來看看Flex如何實現，從1個點到9個點的佈局。你可以到codepen

如何使用 Flexbox 和 CSS Grid，實現高效佈局

（點選上方公眾號，可快速關注）來源：葡萄城控制元件www.cnblogs.com/powerto

CSS3 網格佈局(grid-layout)基礎知識

網格佈局支援彈性尺寸（flex-size），這是一個很好的自適應佈局技術。彈性尺寸使用fr尺寸單位，其來自 "fraction" 或 "fractional unit" 單詞的前兩個字母，表示整體空間的一部分。比如下面的CSS規則：grid-template-columns: