整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS Grid 網格布局可以將包裹元素任意組合成不同的網格，進而快速、便捷的對頁面結構進行布局，提高工作效率。當然了，每一種布局方法都有各自優勢，所以，我們無需糾結使用什么方法，而是在什么條件下使用什么方法。目的只有一個，高效、便捷。
新的方法與屬性的產生只會讓我們更為快速、便捷地處理當前需求；我們在一定的條件下，使用合理的方法，進而高效、便捷地完成任務。
網頁布局這是創建web頁面的基礎結構操作，對于當下市場上N多種UI封裝包共享，一定程度上我們很少操作HTML及其CSS相關工作，更多的前端工程師們精力放在了JavaScript（及其相關框架），這也是正常現象，同時也因"環境"而定。
不多廢話，一起看看CSS中的Grid布局方法，或許以后有用。以前看到過，屬性太多，沒怎么看，今天休假，索性心靜下來慢慢看。
Web頁面結構布局是創建新頁面的基礎，它是數據信息呈現的骨架，方法很多，無論用什么方法，我們最終呈現出來的結果都一樣，當然了，這是對于用戶而言，用戶不會看你的頁面結構是如何布局，用什么方法；他們更多在意的是視覺以及數據呈現結構是否符合自己的瀏覽習慣。而身為前端開發者???而言，關注的是，能否快速實現效果，能否可擴展亦或便于二次修改。
CSS Grid網格布局
由于其屬性相對比較多，所以我們由簡至繁去了解，不然急性子真看不下去?。
一、HTML結構層（父元素與子元素）
創建一個640寬度的ul->li結構
CSS Grid網格布局
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>// UL
width:640px;
display: grid;
grid-template: 1fr 1fr/1fr 1fr;
// LI我們通過父容器display:grid聲明后，那么其下子元素則聽從其父的安排，怎么感覺跟人一樣?，讓你往東你不能往西...
示例中grid-template是一種簡寫，即：grid-template-rows 與 grid-template-columns
grid-template: auto 1fr / auto 1fr auto;
// 等同與
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr auto;
grid-template-areas: none;是行與列的一種分配方式，猶如我們在使用HTML中table（表格）元素一般，行與列劃分。
其中1fr，fr是fraction（讀音：[?fr?k?n] n:小部分; 少量; 一點兒; 分數; 小數;）的縮寫，提供的一個單位，和我們在使用flex布局時，子元素設置flex:1 | 2一個性質，是一個比例值。
二、父元素擁有哪些屬性權限對其子元素進行操控
1、grid-template
比如，我們創建一個2行（高度100px與80px）3列（第一個和最后一個寬度為100px）的布局結構
那么我們通過grid-template屬性進行操作，上面說了grid-template是3個屬性的一個簡寫或縮寫
grid-template-columns屬性是定義其列的寬度，
grid-template-rows屬性定義行的高度
CSS Grid 網格布局（2行3列）
width:640px;
display: grid;
grid-template: 100px 80px/100px auto 100px;// <row>/<col>2、grid-gap
如果我們需要對網格間設置間隔寬度，那么就可以使用grid-gap屬性對其操作，它和grid-template一樣，也是另外2個屬性的簡寫，即：
grid-row-gap屬性設置其行與行的間隔
grid-column-gap屬性則設置其列與列的間隔
類似我們常用的padding屬性（padding: 20px 10px）一般，只不過對于Grid網格布局屬于行與列的結構，所以，它的屬性值對應順序是行與列。
按我們常說的口語順序即可，幾行幾列，很少見說幾列幾行吧。
所以，其表示方法如：
grid-gap: 20px 15px; // <行><列>CSS Grid 網格布局 grid-gap
width:640px;
display: grid;
grid-template: 100px 80px/100px auto 100px;
grid-gap: 20px 15px;3、repeat()
repeat字面意思我們就可以看出其屬性的作用，基于一定值我們可以通過其操作，避免重復，簡化操作和js中函數一般，避免重復代碼堆積，造成不必要的勞動。
例如我們創建一個2行3列的布局結構，要求行高100px,寬度等比。
CSS Grid網格布局 repeat()
那么基于上述及其上上述，我們就可以這樣寫：
width:640px;
display: grid;
grid-template: repeat(2, 100px)/repeat(3, 1fr);
grid-gap: 20px 15px;這樣避免重復值操作，當然1~2個無所謂，多個網格呢？就麻煩了。
repeat()其參數：第一個參數是重復次數，第二個是其屬性值。
4、grid-auto-flow
在對其劃分網格后，我們可以通過grid-auto-flow控制子元素如何排列于網格。
默認是橫向排列，其屬性值為row，上述示例均為橫向轉行排列，那么我們看看縱向效果排列所呈現的效果，看里面的數字。
CSS Grid 網格布局 grid-auto-flow
我們設置grid-auto-flow屬性值為column，結構排列將由原來的"123456"變更為"135246";
grid-auto-flow:column;詳細的參考官方文檔...
三、Grid子元素項目上操作權限
1、grid-row與grid-column
grid-row與grid-column其表示法1/3方式，和上述一樣屬于屬性（grid-row-start/grid-row-end及其grid-column-start/grid-column-end）簡寫方式，效果一樣。
即子項目定位于網格線開始與結束位。
例如，我們讓其第一個子項目行始于1結束于第3個網格線，列由1至2，基于父級我們設置的示例，這里我們刪除一個子項，為了顯示效果。
CSS Grid 網格布局 grid-row grid-column
ul{
width:640px;
display: grid;
grid-template: repeat(2, 100px)/repeat(3, 1fr);
grid-gap: 20px 15px;
grid-auto-flow:column;
font-size:16px;
color:white;
}
li:first-of-type{
grid-row: 1/3;
grid-column: 1/2;
background-color:red;
color:white;
}其中子項目中的grid-row與grid-column表示法等同于<開始位>/<結束位>
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;2、span
表示其子項跨域數，例如上述效果我們我們也可以這樣實現。
grid-row: 1/ span 2;
grid-column: 1/2;至于justify-content、align-content等等在flex布局中我們已經認識了，這里就不再描述了。
好了，就到這里，這篇文章貌似寫了好幾個小時，更多的大家創建demo去研究；同時更多屬性方法跨域參考W3C官方文檔去研究。
上周發布的Google Chrome 89瀏覽器之后，Chrome 90瀏覽器現在以測試版的形式推出，帶來了之前提到的對WebRTC使用的AV1編碼支持，用于在專注于實時視頻會議的Web瀏覽器內提供AV1編碼能力。
雖然現時AOMedia參考編碼器的性能仍然相當低，但這是向改善WebRTC支持前進的一步。
谷歌在Chrome 90 Beta公告中指出，AV1提供了更好的壓縮效率，對于極低帶寬的網絡（30kbps及以下）有更好的效果，并且提供了比VP9和其他編解碼器更好的屏幕共享效率。
Chrome 90測試版還圍繞MediaStreamTrack可插入流、getCurrentBrowsingContextMedia、WebAssembly異常處理和WebXR AR燈光估計等方面進行了新的試驗。Chrome 90還在研究CSS縱橫向插值、自定義狀態偽類、"overflow: clip"CSS屬性支持等面向開發者新增功能。
下載地址：
https://www.google.com/intl/zh-CN/chrome/beta/
關于新發布的Chrome 90測試版的更多細節，請通過Chromium.org了解：
https://blog.chromium.org/2021/03/chrome-90-beta-av1-encoder-for-webrtc.html
做企業網站的時候，經常能碰到這樣的情況：在某個區域顯示供應商或者是合作伙伴的圖標，以顯示公司的可靠性。
滾動顯示合作伙伴
效果如上圖顯示，兩邊的黃線是為了突出顯示，實際應用中請自己設置。
如何實現的呢？
1、自己寫jquery或者javascript實現，當然可以。不建議這樣做（大神除外），當然如果發生兼容性問題的時候，不得不自己寫。
2、使用現成的插件實現，好多；今天我們就用一款國外比較流行的插件：owl.carousel.min.js來實現。
下面是具體的步驟：
首先：HTML代碼：
⑴，依次引入jquery庫和owl.carousel.min.js插件；見下圖：
引入jquery庫和owl.carousel.min.js
⑵依次引入owl.carousel.min.css和支持的皮膚css
引入owl.carousel.min.css
⑶書寫結構：
html結構
⑷書寫owl.carousel.min.js參數，如下圖：
書寫參數
⑸書寫css文件，注意，這是包裹的容器，而不是插件本身的css，如果需要修改插件本身的css，請修改owl.carousel.css。見下圖：
css樣式
這樣，就搞定了，如第一張動圖的效果，如果自己定制一些樣式，和滾動選項就需要花一點時間來研究了。
號外，如果需要詳細的參數說明，請在評論區留言，我會再寫一篇文章來說明的。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
