「CSS」柵格化布局

頭條創作挑戰賽#

本文同步本人掘金平臺的文章：https://juejin.cn/post/6886367930523746312

柵格化布局幫助你更容易構建復雜的網頁設計。它會將HTML元素轉換為網格的容器（有行有列）。你可以在網格里面添加你想要的子元素。

grid 初始化元素為柵格化

將一個HTML元素轉換為網格的容器，只需要對其設置display: grid即可。display: grid告訴我們，可以使用CSS Grid的相關屬性了。

<dl class="container">
  <dd class="item1">item1</dd>
  <dd class="item2">item2</dd>
  <dd class="item3">item3</dd>
  <dd class="item4">item4</dd>
  <dd class="item5">item5</dd>
  <dd class="item6">item6</dd>
</dl>
復制代碼

.container{
  display: grid;
}
復制代碼

? 在CSS柵格布局中，父元素就是柵格容器（這里是class="container"的dl元素），其下的子元素為我們稱為項目items

grid-template-columns 設置列數

上面我們已設定容器container為珊格化了，那么我們還得為這塊圈起來的元素設置模版列數，表明列的區域。

.container{
  min-width: 200px;
  display: grid;
  grid-template-columns: 100px 100px auto;
}
復制代碼

grid-template-columns的屬性值100px 100px auto的意思是將區域劃分為三列，第一列和第二列的寬度都為100px，第三列的寬度為自適應。

grid-template-rows 設置行數

上面我們設置了列數，那么對應的，就有行數，我們來設置下模版行數。

.container{
  min-height: 200px;
  display: grid;
  grid-template-rows: 60px auto;
}
復制代碼

grid-template-rows的屬性值60px auto的意思是將區域分為兩行，第一行的高度固定為60px，而第二行的高度自適應。

單位的設置可以有px, auto, %, fr。這里的fr是fraction的縮寫,表示某物的部分。比如下面的例子：

grid-template-rows: auto 10% 2fr 1fr，表示的意思是將柵格化的區域分為4行：第一行是根據內容自適應，第二行為區域的10%，最后剩余的區域分成三部分，2fr表示占其2/3，1fr表示占其1/3。

grid-column-grap 設置列間距

有必要對列與列之間設置間距，你可以理解為margin-left和margin-right的應用：

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-column-gap: 10px;
}
復制代碼

grid-column-gap表示列之間相隔10px，對左邊界區域左間隔不影響，對右邊界區域右間隔不影響。

grid-row-gap 設置行間距

像上面設置列邊距一樣，有必要設置列與列的間距，對應的 - 你可以理解為margin-top和margin-bottom的應用：

.container{
  display: grid;
  grid-template-rows: 60px auto;
  grid-row-gap: 10px;
}
復制代碼

grid-row-gap表示行之間相隔10px，對上邊界區域頂部間隔不影響，對下邊界區域底部間隔不影響。

grid-gap 簡寫

像margin一樣，我們可以對margin-top, margin-right, margin-bottom, margin-left進行簡寫。grid-gap可以對grid-row-gap, grid-column-gap進行簡寫。

但是，grid-gap的值又不像margin一樣可以寫四個，它只有兩個：

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 60px auto;
  grid-gap: 10px 20px;
}
復制代碼

grid-gap: 10px 20px表示行間隔為10px，列間隔為20px。

到目前為止，我們講的是柵格布局容器的拆分，下面我們來講其子元素的布局。

子元素 grid-column

grid-column表示列跨度，比如:

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  .item5{
    grid-column: 1 / 3
  }
}
復制代碼

grid-column上面的列跨度，表示類名為item5元素橫跨第一列到第三列。

子元素 grid-row

對應的，grid-row表示行跨度，比如：

.container{
  display: grid;
  grid-template-rows: 50px 50px auto;
  .item3{
    grid-row: 2 / 4
  }
}
復制代碼

grid-row上面的行跨度，表示類名為item3元素橫跨第二行到第四行。

子元素 justify-self

justify-self更改元素寬度和排列的位置，有值如下：

stretch: 默認值，拉伸內容的寬度為預設的寬度
start: 寬度為內容寬度，內容在左側展示
center: 寬度為內容寬度，內容在居中展示
end: 寬度為內容寬度，內容在右側展示

子元素 align-self

align-self更改元素高度和排列的位置，有值如下：

stretch: 默認值，拉伸內容的高度為預設的高度
start: 寬度為內容高度，內容在上側展示
center: 寬度為內容高度，內容在居中展示
end: 寬度為內容高度，內容在下側展示

justify-items

我們想對所有子元素內容進行水平方向的排列，那么需要在設定的容器中使用justify-items屬性，而不是一個個子元素進行設置justify-self屬性。justify-items屬性值同justify-self。

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-items: center;
}
復制代碼

align-items

同理的，我們想對所有子元素內容進行垂直方向的排列，那么需要在設定的容器中使用align-items屬性，而不是一個個子元素進行設置align-self屬性。align-items屬性值同align-self。

.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  align-items: center;
}
復制代碼

grid-template-areas

通過grid-template-areas為每個柵格單元命名。

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  grid-template-areas: 
    "header header header"
    ". content content"
    "footer footer footer";
}
復制代碼

注意: ? .表示表格中的空單元格

子元素 grid-area關聯預設名稱

grid-template-areas已經為元素劃分好了單元格并命名了，接下來可以通過grid-area在其子元素中關聯上。

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  grid-template-areas: 
    "header header header"
    ". content content"
    "footer footer footer";
  .item6{
    grid-area: footer;
  }
}
復制代碼

當然，我們可以僅僅使用grid-area實現上面需要grid-template-area和grid-area才能實現的效果。如下

.container{
  display: grid;
  grid-template-columns: 100px 100px auto;
  grid-template-rows: 50px 50px auto;
  .item6{
    grid-area: 3 / 1 / 4 / 4;
  }
}
復制代碼

grid-area簡寫的語法是：

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
復制代碼

使用函數repeat簡化

使用grid-template-columns和grid-template-rows定義柵格的行列結構。上面我們是一個個定義的。我們也可以使用repeat()函數簡化操作。

比如分為四列，第一列和第二列是100px，第三列為1fr,最后一列是2fr。

.container{
  display: grid;
  grid-template-columns: repeat(2, 100px) 1fr 2fr;
}
復制代碼

函數minmax限定最小最大值

在我們布局空間有限的情況下，我們需要對布局的元素設置其最小值和最大值，通過minmax()函數可以輕松做到。

.container{
  display: grid;
  grid-template-columns: repeat(2, 100px) minmax(60px, 1fr) 2fr;
}
復制代碼

上面的屬性在實際的開發中已經夠用。如果你還想了解其他的屬性等，你可以點擊下面的參考鏈接進行學習。grid的兼容性還是杠桿的，除了Opera Mini和Baidu Browser不支持外，其他的都支持~

更多的內容可以前往JIMMY BLOG

參考

cssgridgarden.com/

www.freecodecamp.org/learn/respo…

　檢驗前端的一個基本功就是考查他的布局。很久之前圣杯布局風靡一時，這里就由圣杯布局開始，到最流行的Bootstrap柵格布局。

圣杯布局

　　先來看看圣杯布局，這是一種三列布局，兩邊定寬，中間自適應的布局，案例如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>布局案例1</title>
<style type="text/css">
* {
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
}
.container{
    width:100%;
}
.container:after{
    display: table;
    content:".";
    clear:both;
}
.container .cl{
    float:left;
    border: 1px solid red;
    height: 200px;
}
.main{
    width:100%;
    padding 0 290px 0 320px;
    background-color: blue;
}
.sub{
    width: 320px;
    margin-left:-100%;
    background-color: white;
}
.extra{
    width: 290px;
  margin-left:-290px;
  background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
    <div class="cl main">
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>
</body>

圣杯布局的原理就是當子元素處于浮動狀態時，設置負margin，子元素會疊蓋到兄弟元素之上。　

　　那么能否用現在想要將其中藍色區域再次劃分成三個區域，相信有很多種辦法。但能否通過嵌套的方式實現呢？我們可以試一下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>布局案例2</title>
<style type="text/css">
    * {
        box-sizing: border-box;
    }
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .container{
        width:100%;
    }
    .container:after{
        display: table;
        content:".";
        clear:both;
    }
    .container .cl{
        float:left;
        border: 1px solid red;
        height: 200px;
    }
    .main{
        width:100%;
        padding: 0 290px 0 320px;
        background-color: blue;
    }
    .sub{
        width: 320px;
        margin-left:-100%;
        background-color: white;
    }
    .extra{
        width: 290px;
        margin-left:-290px;
        background-color: yellow;
    }
</style>
</head>
<body>
<div class="container">
    <div class="cl main">
        <div class="container">
            <div class="cl main"></div>
            <div class="cl sub"></div>
            <div class="cl extra"></div>
        </div>
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>
</body>
</html>

可以看到藍色區域已被劃分成三個區域。這個過程是不是很像bootstrap中的柵格嵌套？誠然，利用圣杯布局我們可以實現一套簡單的柵格系統，但柵格布局就是簡單地嵌套出來的嗎，很明顯答案是否定的。柵格設計系統（又稱網格設計系統、標準尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格子設計版面布局，其風格工整簡潔，已成為今日出版物設計的主流風格之一。那么如何來設計柵格系統呢？我們往下看

柵格系統的原理

　　假設：Flowline的寬度為W，column的寬度為c，Gutter的寬度為g，Margin的寬度為m，柵格列數為N

　　W=c*N + g*(N-1) + 2m；g的寬度通常為m的兩倍，所以：

　　W=(c+g) * N；把c+g記為C，得：

　　W=C * N;

　　大部分的柵格系統都是此公式的變體。

Bootstrap的柵格系統

　　下面我們將一起來看一下常見的柵格布局的設計和bootstrap中的設計實現。BootStrap中合理的使用柵格布局，必須將列放入row中，而row必須放入container中。container類在布局中主要有兩個作用：

在不同的寬度區間內（響應式斷點）提供寬度限制。當寬度變化時，采用不同的寬度。
提供一個padding，阻止內部內容觸碰到瀏覽器邊界。

　　Bootstrap中使用padding代替上文中的margin。大小為15px，如下圖所示，粉紅色為padding大小。

　　Row是column的容器，每個row中的column之和必須為12，不過我們可以通過嵌套的方式擴展。Row的左右margin都為-15px，用來抵消container中的padding，如下圖藍色部分所示：

　row的這種設計主要為了方便嵌套，后文中會提到。

　　Colomn是柵格系統的主角，每個column左右padding都為15px，上文中row的負margin抵消了container的padding，所以為每個column設置padding就是為了防止內容直接觸碰邊界，同時不同的column之間擁有30px的卡槽（Gutter）。如下圖黃色部分所示：

　　現在想想上文中提到的公式：W=C * N;

　　上文提到row的負margin設計主要為了嵌套，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作為容器的column中，而不需要在放置一個container。如下圖中藍色所示，是放入column中的row的負margin區域。

　　現在將被嵌套的column放入row中，如下圖所示，上層column便是起到了container的作用。

　　如此我們便看到了Bootstrap柵格系統的精妙所在。

考：https://gdal.org/download.html

裁切柵格數據是GIS中常見的操作，它允許從較大的柵格數據中提取出子區域的柵格數據。例如從全省的影像數據中提取出某一個縣的影像數據。

1.命令： gdalwarp.exe -overwrite -of GTiff -cutline D:\data\boundry.shp -cl boundry -crop_to_cutline -dstnodata 255.0 D:\data\plant_distribution.tif D:\data\plant_distribution_cut.tif

2.關鍵參數

其中：

-cutline 參數表示裁剪矢量文件

-cl 參數表示裁剪圖層名

-crop_to_cutline參數表示按邊界輸出

-dstnodata 參數表示NoData值

3.示例

在線咨詢

上一篇：從屌絲到大神，設計師必備網址（上篇）
下一篇：JavaScript操作Canvas實現畫板實例分析

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「CSS」 柵格化布局