你可能不知道的 grid 實用功能!有時候真的很方便
作者：欲買炸雞同載可樂 原文：https://juejin.cn/post/7326816030042669110
flex布局大家應(yīng)該已經(jīng)運用的爐火純青了，相信在日常開發(fā)中大家和我一樣不管遇到什么都是flex一把搜哈。直到我遇到grid，才發(fā)現(xiàn)有些場景下，不是說flex實現(xiàn)不了而是使用grid能夠更加輕松的完成任務(wù)。下面拿幾個場景和大家分享一下。
宮格類的布局
比如我要實現(xiàn)一個布局，最外層元素的寬度是1000px，高度自適應(yīng)。子元素寬度為300px，一行展示3個，從左到右排列。其中最左邊與最右邊的元素需要緊挨父元素的左右邊框。如下圖所示：
使用flex實現(xiàn)
這個頁面布局在日常開發(fā)中非常常見，考慮下使用flex布局如何實現(xiàn)，橫向排列元素，固定寬度300，wrap設(shè)置換行顯示，設(shè)置雙端對齊?？雌饋砗芎唵?，來實現(xiàn)一下。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
}
.item{
background: pink;
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
</body>
</html>
實現(xiàn)之后發(fā)現(xiàn)了問題，由于我們設(shè)置了雙端對齊導致，當最后一行的個數(shù)不足三個時，頁面展示的效果和我們預期的效果有出入。使用flex實現(xiàn)這個效果就要對這個問題進行額外的處理。
處理的方式有很多種，最常見的處理方式是在元素后面添加空元素，使其成為3的倍數(shù)即可。其實這里添加空元素的個數(shù)沒有限制，因為空元素不會展示到頁面上，即使添加100個空元素用戶也是感知不到的。個人覺得這并不是一個好辦法，在實際處理的時候可能還會遇到別的問題。個人覺得還是把flex下的子元素設(shè)置成百分比好一點。
使用grid實現(xiàn)
面對這種布局使用grid是非常方便的，設(shè)置3列，每列300px，剩下的元素讓它自己往下排即可。幾行代碼輕松實現(xiàn)該效果，不需要flex那樣額外的處理。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
display: grid;
grid-template-columns: repeat(3, 300px);
justify-content: space-between;
gap: 10px;
width: 1000px;
}
.item {
background: pink;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
</body>
</html>
實現(xiàn)后臺管理布局
這種后臺管理的布局，使用flex實現(xiàn)當然也沒有問題。首先需要縱向排列紅色的兩個div，然后再橫向的排列藍色的兩個div，最后再縱向的排列綠色的兩個div實現(xiàn)布局。達到效果是沒有問題的，但是實現(xiàn)起來較為繁瑣，而且需要很多額外的標簽嵌套。
由于grid是二維的，所以它不需要額外的標簽嵌套。html里面結(jié)構(gòu)清晰，如果需要改變頁面結(jié)構(gòu)，只需要改變container的樣式就可以了，不需要對html進行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 100px 1fr 100px;
grid-template-areas:
'header header'
'aside main'
'aside footer';
height: 100vh;
}
.header {
grid-area: header;
background: #b3c0d1;
}
.aside {
grid-area: aside;
background: #d3dce6;
}
.main {
grid-area: main;
background: #e9eef3;
}
.footer {
grid-area: footer;
background: #b3c0d1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="aside">Aside</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
實現(xiàn)響應(yīng)式布局
借助grid的auto-fill與minmax函數(shù)可以實現(xiàn)類似響應(yīng)式布局的效果，可以應(yīng)用在后臺管理的表單布局等場景。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
justify-content: space-between;
gap: 10px;
}
.item {
background: pink;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
</body>
</html>
兼容性對比
flex的兼容性
image.png
grid的兼容性
image.png
可以看到grid在兼容性上還是不如flex，grid雖然強大，但是在使用前還是需要先考慮一下項目的用戶群體。
結(jié)尾
除了上述場景外肯定還有許多場景適合使用grid來完成。grid和 flex都是強大的布局方式，它們并沒有明顯的優(yōu)劣之分。關(guān)鍵在于掌握這兩種方法，并在開發(fā)中根據(jù)實際情況選擇最合適的方案。
希望大家能有所收獲！
最后
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我個小忙：
-
點個「喜歡」或「在看」，讓更多的人也能看到這篇內(nèi)容
-
我組建了個氛圍非常好的前端群，里面有很多前端小伙伴，歡迎加我微信「sherlocked_93」拉你加群，一起交流和學習
-
關(guān)注公眾號「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時聊騷。