1、前言
?????????柵格布局或者說網(wǎng)格布局是很好用的東西，像一些商城類的排版就很適合用柵格布局，但是存在一定的兼容性問題，兼容性暫時(shí)還沒有研究，這邊學(xué)習(xí)總結(jié)是針對grid也就是柵格布局的使用的學(xué)習(xí)總結(jié)，下面將介紹我認(rèn)為的常用的幾個屬性，如果想要更詳細(xì)的學(xué)習(xí)，可以參考阮一峰老師的grid布局
2、使用
首先是html
<template>
<div class="grid-box">
<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>
</template>然后使用grid 布局列與行的列數(shù)行數(shù)都是根據(jù)需求來設(shè)置的，可以更改，更詳細(xì)的可以搜阮一峰老師的grid布局查看，在本文首頁有鏈接
.grid-box {
// 柵格布局三行三列
display: grid;
// 3是多少行列 后面 100px是列寬，行的設(shè)置同理
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
.grid-item {
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
background: rgb(239,52,41);
&:nth-child(2){
background: rgb(246,143,37);
}
&:nth-child(3){
background: rgb(75,168,70);
}
&:nth-child(4){
background: rgb(4,118,194);
}
&:nth-child(5){
background: rgb(192,119,175);
}
&:nth-child(6){
background: rgb(248,210,157);
}
&:nth-child(7){
background: rgb(180,168,127);
}
&:nth-child(8){
background: rgb(208,228,168);
}
&:nth-child(9){
background: rgb(77,199,236);
}
}
}救會出現(xiàn)這樣的效果了
如果想要好看點(diǎn)可以給父容器（.grid-box）加上一點(diǎn)內(nèi)邊距與陰影
padding: 10px;
box-shadow: 0 0 10px #999;然后就得到了這樣效果
此時(shí)我么可能會有讓各個數(shù)字有間隙的需求，此時(shí)就可以用上下面兩個屬性了，也是在父容器設(shè)置的
// 行列間距
column-gap: 10px;
row-gap: 10px;然后效果就是這樣的
?
? 此時(shí)我們克呢該有會有這樣的需求，就是按列排，而不是像上面按行排列，此時(shí)就需要使用到
// 默認(rèn)是按先行后列的，現(xiàn)在也可以改為先列后行 默認(rèn)值是 row
grid-auto-flow: column;然后效果就是這樣的
以上內(nèi)容的完整代碼如下
<template>
<div class="grid-box">
<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>
</template>
<script setup lang='ts'>
</script>
<style scoped lang="scss">
.grid-box {
// 柵格布局三行三列
display: grid;
// 3是多少行列 后面 100px是列寬，行的設(shè)置同理
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
// 行列間距
column-gap: 10px;
row-gap: 10px;
padding: 10px;
box-shadow: 0 0 10px #999;
// 默認(rèn)是按先行后列的，現(xiàn)在也可以改為先列后行
grid-auto-flow: column;
.grid-item {
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
background: rgb(239,52,41);
&:nth-child(2){
background: rgb(246,143,37);
}
&:nth-child(3){
background: rgb(75,168,70);
}
&:nth-child(4){
background: rgb(4,118,194);
}
&:nth-child(5){
background: rgb(192,119,175);
}
&:nth-child(6){
background: rgb(248,210,157);
}
&:nth-child(7){
background: rgb(180,168,127);
}
&:nth-child(8){
background: rgb(208,228,168);
}
&:nth-child(9){
background: rgb(77,199,236);
}
}
}
</style>?假如每個單元格里面各自有內(nèi)容，可以是使用以下鏈各個屬性進(jìn)行布局，它們的值可以是
// 設(shè)置單元格的布局,但是這兩個屬性設(shè)置后會減該內(nèi)容壓縮，所以使用的時(shí)候要注意
// 他么可以取的值是 start | end | center | stretch
justify-items: center;
align-items: center;效果是這樣的
??
?還可以設(shè)置整體內(nèi)容的排版
// 設(shè)置容器內(nèi)整體內(nèi)容的排版
// 可取的值為 start | end | center | stretch | space-around | space-between | space-evenly;
justify-content: center;
align-content: center;效果
?以上就是我認(rèn)為常用的容器的屬性，解釋一下容器與項(xiàng)目(容器內(nèi)的第一層子元素（項(xiàng)目里面的元素不是項(xiàng)目）)在這里其實(shí)就是
.grid-box與.grid-item
3、項(xiàng)目屬性
?這里值寫四個屬性，其實(shí)不止，只不過作者是我認(rèn)為常用的屬性
grid-column-start屬性：左邊框所在的垂直網(wǎng)格線
grid-column-end屬性：右邊框所在的垂直網(wǎng)格線
grid-row-start屬性：上邊框所在的水平網(wǎng)格線
grid-row-end屬性：下邊框所在的水平網(wǎng)格線// 設(shè)置單元格的內(nèi)容樣式
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;效果
代碼：
<template>
<div class="grid-box">
<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>
</template>
<script setup lang='ts'>
</script>
<style scoped lang="scss">
.grid-box {
// 柵格布局三行三列
height: 100%;
display: grid;
// 3是多少行列 后面 100px是列寬，行的設(shè)置同理
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
// 行列間距
column-gap: 10px;
row-gap: 10px;
padding: 10px;
box-shadow: 0 0 10px #999;
// 默認(rèn)是按先行后列的，現(xiàn)在也可以改為先列后行()colunm)
grid-auto-flow: row;
// 設(shè)置單元格的布局,但是這兩個屬性設(shè)置后會減該內(nèi)容壓縮，所以使用的時(shí)候要注意
// justify-items: center;
// align-items: center;
// 設(shè)置容器內(nèi)整體內(nèi)容的排版
justify-content: center;
align-content: center;
.grid-item {
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
background: rgb(239,52,41);
&:nth-child(1) {
// 設(shè)置單元格的內(nèi)容樣式
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
&:nth-child(2){
background: rgb(246,143,37);
}
&:nth-child(3){
background: rgb(75,168,70);
}
&:nth-child(4){
background: rgb(4,118,194);
}
&:nth-child(5){
background: rgb(192,119,175);
}
&:nth-child(6){
background: rgb(248,210,157);
}
&:nth-child(7){
background: rgb(180,168,127);
}
&:nth-child(8){
background: rgb(208,228,168);
}
&:nth-child(9){
background: rgb(77,199,236);
}
}
}
</style>這是一個組件內(nèi)容，需要在app.vue中引入使用文章來源：http://www.zghlxwxcb.cn/news/detail-450230.html
以上就是我對grid學(xué)習(xí)的筆記總結(jié)，歡迎批評指正，交流學(xué)習(xí)?文章來源地址http://www.zghlxwxcb.cn/news/detail-450230.html
到了這里，關(guān)于grid 柵格/網(wǎng)格布局學(xué)習(xí)筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
