Grid

Posted on Edited on In Views: Disqus:

 

想要用 grid 來排版最基本就是將作為 container 元素宣告為 display:grid; 或 display:inline-grid;，

才能使用 grid 技術，下面將一一列出相關 grid 屬性的用法。

 

一、grid 與 inline-grid

display:grid;

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>

</html>

畫面為

 

display:inline-grid;

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: inline-grid;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>

</html>

畫面為

 

二、什麼是 column？什麼是 row？

 

 

三、grid-template-columns、grid-template-rows

grid-template-columns 屬性是用來控制一個 grid 可以有幾行，型式為 space-separated-list，

其值可以指定成 auto、px 單位，而 grid-template-rows 屬性是用來個別指定一個 grid 的第 n 列的高度，

其值可以指定成 px 單位。

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 25px 50px auto;
            grid-template-rows: 100px 200px;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>

</html>

畫面為

 

四、grid-column-gap、grid-row-gap、grid-gap

1、grid-column-gap 是用來控制 column 間的間隙大小，單位可為 px。

2、grid-row-gap 是用來控制 row 間的間隙大小，單位可為 px。

3、grid-gap 則是 grid-gap : grid-row-gap  grid-column-gap; 簡寫，

如果 grid-row-gap 等於 grid-column-gap 時，也可以合起來成一個單位。

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 25px 50px auto;
            grid-template-rows: 100px 200px;
            /*grid-gap: 10px;*/
            grid-gap: 50px 10px;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
    </div>
</body>

</html>

畫面為

 

五、justify-content

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            border: 1px solid red;
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: 100px 100px 100px 100px;
            grid-gap: 10px;
            justify-content: space-evenly;
            /*justify-content: space-around;*/
            /*justify-content: space-between;*/
            /*justify-content: center;*/
            /*justify-content: start;*/
            /*justify-content: end;*/
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
    </div>
</body>

</html>

justify-content 的屬性值有 space-evenly、space-around、space-between、center、start、end

1、space-evenly 的樣式為

2、space-around 的樣式為

3、space-between 的樣式為

4、center 的樣式為

5、start 的樣式為

6、end 的樣式為

 

六、align-content

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            border: 1px solid red;
            height: 400px;
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            align-content: space-evenly;
            /*align-content: space-around;*/
            /*align-content: space-between;*/
            /*align-content: center;*/
            /*align-content: start;*/
            /*align-content: end;*/
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
    </div>
</body>

</html>

align-content 的屬性值有 space-evenly、space-around、space-between、center、start、end

1、space-evenly 的樣式為

2、space-around 的樣式為

3、space-between 的樣式為

4、center 的樣式為

5、start 的樣式為

6、end 的樣式為

 

七、Grid Items - grid-column-start、grid-column-end、grid-row-start、grid-row-end

圖片來源：https://www.w3schools.com/css/css_grid.asp

 

針對 grid item 可以指定其覆蓋之範圍，例如：grid-column-start: 1; grid-column-end: 3;，

表示一個 grid item 以行來看，從 line 1 到 line 3 為其覆蓋範圍，

未指定，則表示佔一個基本單位，如下範例。

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: 100px 100px 100px 100px;
            grid-gap: 10px;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }

        .item1 {
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
    </div>
</body>

</html>

畫面為

 

八、Grid Items - grid-column、grid-row

1、grid-column 屬性是 grid-column-start 與 grid-column-end 的簡寫

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: 100px 100px 100px 100px;
            grid-gap: 10px;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }

        .item1 {
            grid-column: 1 / 3;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
    </div>
</body>

</html>

畫面如下

 

可以不以 Grid Line 為觀念，改以 Gird Item 單位來看，

以下面範例以「span」關鍵字表示以 Line 1 開始，往後三個 column 單位為覆蓋範圍。

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: 100px 100px 100px 100px;
            grid-gap: 10px;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }

        .item1 {
            grid-column: 1 / span 3;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
    </div>
</body>

</html>

畫面為

 

2、grid-row 屬性是 grid-row-start 與 grid-row-end 的簡寫

觀念都與 grid-column 一樣，請參考上一項範例，就不舉例了。

 

九、Grid Items - grid-area

grid-area 屬性的語法為

grid-area : grid-row-start / grid-column-start / grid-row-end / grid-column-end;

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: 100px 100px 100px 100px;
            grid-gap: 10px;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }

        .item1 {
            grid-area: 1 / 1 / 3 / 3;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
    </div>
</body>

</html>

畫面為

 

grid-area 也可以搭配 「span」關鍵字

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: 100px 100px 100px 100px;
            grid-gap: 10px;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }

        .item1 {
            grid-area: span 1 / 1 / 3 / span 3;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
    </div>
</body>

</html>

畫面為

 

十、grid-template-areas

grid-area 屬性也可以使用命名的方式來跟 grid-template-areas 屬性搭配

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-areas: 
                'header header header header header' 
                'menu main main right right' 
                'menu footer footer footer footer';
            grid-gap: 10px;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }

        .item1 {
            grid-area: header;
        }

        .item2 {
            grid-area: menu;
        }

        .item3 {
            grid-area: main;
        }

        .item4 {
            grid-area: right;
        }

        .item5 {
            grid-area: footer;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item1">header</div>
        <div class="grid-item item2">menu</div>
        <div class="grid-item item3">main</div>
        <div class="grid-item item4">right</div>
        <div class="grid-item item5">footer</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
    </div>
</body>

</html>

畫面為

 

當已經定好了第一列的 column 數量之後，

接下來的每一列的 column 數量都需跟第一列看齊，否則會破版，

可以利用「.」號來當作填充物，多多少少可以減輕上述的不方便。

<!DOCTYPE html>
<html>

<head>
    <style>
        .grid-container {
            display: grid;
            grid-template-areas: 
                'header header header . .' 
                'menu main main right right' 
                'menu footer footer footer footer';
            grid-gap: 10px;
        }

        .grid-item {
            border: 1px solid rgba(0, 0, 0, 0.8);
        }

        .item1 {
            grid-area: header;
        }

        .item2 {
            grid-area: menu;
        }

        .item3 {
            grid-area: main;
        }

        .item4 {
            grid-area: right;
        }

        .item5 {
            grid-area: footer;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div class="grid-item item1">header</div>
        <div class="grid-item item2">menu</div>
        <div class="grid-item item3">main</div>
        <div class="grid-item item4">right</div>
        <div class="grid-item item5">footer</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
    </div>
</body>

</html>

畫面為

 

參考資料：

A Complete Guide to Grid

A Complete Guide to CSS Grid Layout

CSS Grid 介紹