欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 grid 布局的簡單使用示例詳解

  發(fā)布時間：2024-06-04 16:14:02   作者：城南顧北   我要評論
這篇文章主要介紹了CSS3 grid 布局的簡單使用示例詳解,可以選擇使用 absolute 絕對定位為這些塊元素定位，也可以使用多個盒子嵌套來實現(xiàn),結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

CSS3 grid 網(wǎng)格布局的使用

1.概述

如果你要做成以下的這種效果，你會怎么做？

你可以選擇使用 absolute 絕對定位為這些塊元素定位，也可以使用多個盒子嵌套來實現(xiàn)。

當然最簡單的方法是使用 CSS3 grid網(wǎng)格布局。

grid 布局能夠讓我們更加靈活組織盒子的搭配方式。

2.一些概念

行和列的概念

  • column -> 代表列，屬性中有 column 的一般都是列的屬性。
  • row -> 代表行，屬性中有 row 的基本都是行的屬性。

容器和項目

 <div>
 	<span>1</span>
 	<span>2</span>
 	<span>3</span>
 </div>

上面的 div 就是容器，三個 span 都是項目。

在一個網(wǎng)格布局中，如果有 2 × 2 的四個網(wǎng)格，那么就會有 3 × 3 的網(wǎng)格線，因為一個網(wǎng)格有兩遍。

在 grid 布局中，我們可以使用 fr 關鍵字，它的意思是 fraction，即片段的意思，下面的代碼意為著第二列和第三列的列寬是 1:2 的關系，并且 fr 可以與 px 一起混用。

.content {
    display:grid;
    grid-template-columns:100px 1fr 2fr
}

3.一些關鍵屬性實現(xiàn)文章開始的效果

  • display:grid：代表著使用 grid 布局。
  • grid-template-columns：確定有多少列以及每一列的寬度。
  • grid-template-rows：確定有多少行以及每一行的高度。
  • grid-row-gap：設置行間距。
  • grid-column-gap：設置列間距。
  • grid-column-start：確定元素的高度是從哪一行開始。
  • grid-column-end：確定元素的高度是到哪一行結束。
  • grid-row-start：確定元素的寬度是從哪一行開始。
  • grid-row-end：確定元素的寬度是到哪一行結束。

由最后的四個屬性可以確定元素的位置。

其他的元素沒有特殊的設置就會是按照文檔流的順序排列。

我們直接以最開始的例子來理解這些屬性。

代碼：

<template>
	// content 是容器	
    <div class="content"> 
        // 容器里面有四個項目
        <div class="itemOne"></div>
        <div class="itemTwo"></div>
        <div class="itemThree"></div>
        <div class="itemFour"></div>
    </div>
</template>
<script>
export default {
    name: 'App'
}
</script>
<style scoped>
.content {
    // 采用 grid 布局
    display: grid;
    // 有三列，對應的寬度是 100px 100px 200px
    // 注意：如果三個寬度都一樣的話，可以寫成 repeat(3,100px)
    grid-template-columns: 100px 100px 200px;
    // 有兩行，兩行的高度都是 200px
    grid-template-rows: repeat(2, 200px);
    // 行間距是 20px
    grid-row-gap: 20px;
    // 列間距是 20px
    grid-column-gap: 20px;
}
.content>div {
    // 給項目設置圓角
    border-radius: 10px;
    // 給項目設置變大的速度
    transition: all 0.5s;
    // 給項目設置陰影
    box-shadow: 2px 5px 12px #3B2E32;
}
.content>div:hover {
    // 鼠標放上去的時候，項目會放大 1.03 倍
    transform: scale(1.03);
}
// 注意下面所說的網(wǎng)格和網(wǎng)格線的區(qū)別， 3×3 的網(wǎng)格是有 4×4 的網(wǎng)格線的
.itemOne {
    background-color: #ef342a;
    // 項目一的列從第一個網(wǎng)格線開始
    grid-column-start: 1;
    // 項目一的列到第二個網(wǎng)格線結束
    grid-column-end: 2;
    background: url(https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/PictureUnlock_s_295515_user0.pictureunlock.jpg) no-repeat center/cover;
}
.itemTwo {
    background-color: #f68f26;
    // 項目二的列從第二個網(wǎng)格線開始
    grid-column-start: 2;
     // 項目二的列到第三個網(wǎng)格線結束
    grid-column-end: 3;
    background: url(https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/PictureUnlock_s_358187_user0.pictureunlock.jpg) no-repeat center/cover;
}
.itemThree {
    background-color: #4ba946;
     // 項目三的列從第三個網(wǎng)格線開始
    grid-column-start: 3;
     // 項目三的列到第四個網(wǎng)格線結束
    grid-column-end: 4;
    // 項目三的行從第一個網(wǎng)格線開始
    grid-row-start: 1;
    // 項目三的行到第三個網(wǎng)格線結束
    grid-row-end: 3;
    background: url(https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/PictureUnlock_s_346323_user0.pictureunlock.jpg) no-repeat center/cover;
}
// 參照上面的注釋理解
.itemFour {
    background-color: #0376c2;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background: url(https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/QQ截圖20220717231533.png) no-repeat center/cover;
}
</style>

4.其他的一些屬性

學會了以上的一些屬性，就已經(jīng)可以寫出一定的效果了，至于每一個網(wǎng)格內(nèi)，依然可以采用 flex 布局

其他的一些屬性：

網(wǎng)格線可以設置名稱

 grid-template-columns：[line1] 100px [line2] 100px [line3] 100px [line4]
 grid-template-columns：[line5] 100px [line5] 100px [line5] 100px [line8]
grid-column-start: c3;     grid-column-end: c4;

在使用過程中可以用網(wǎng)格線的名字代替索引

行間距 和 列間距 可以合在一起

grid-gap:20px 20px;

網(wǎng)格可以給每一個區(qū)域定義名字

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
                      'd e f'
                      'g h i';

如果想要使幾個部分合并的話，只需要起相同的名字即可。

grid-template-areas: 'a b c'
                     'b b c'
                     'c c c';

如果某一部分不需要，可以用 . 代替即可。

<template>
    <div class="content">
        <div class="itemOne"></div>
        <div class="itemTwo"></div>
        <div class="itemThree"></div>
        <div class="itemFour"></div>
        <img src="" alt="">
    </div>
</template>
<script>
export default {
    name: 'App',
}
</script>
<style scoped>
.content {
    display: grid;
    /* 1.設置 display 為 grid */
    width: 100vw;
    height: 100vh;
    grid-template-areas: "head head head"
        "nav nav nav"
        "foot main main";
    /* 2.區(qū)域劃分 當前為 三行 三列 */
    grid-template-rows: 100px 100px 100px;
    /* 3.各區(qū)域 寬高設置 */
    grid-template-columns: 150px 150px 150px;
}
.itemOne {
    grid-area: head;
    /* 4. 指定當前元素所在的區(qū)域位置，從 grid-template-areas 選取值 */
    background-color: #8ca0ff;
}
.itemTwo {
    grid-area: nav;
    background-color: #ffa08c;
}
.itemThree {
    grid-area: main;
    background-color: #ffff64;
}
.itemFour {
    grid-area: foot;
    background-color: #8cffa0;
}
</style>

grid-auto-flow：默認的放置順序是先行后列

  • 默認值是 row
  • 可以改為 column，這樣就變成了先列后行
  • 還可以是 row dense，用于有幾個元素已經(jīng)指定了位置，表示剩余的按行排列，并且盡可能填滿（注意與row的區(qū)別，row不一定是排滿的）
  • 也可以是column dense，也是有幾個元素已經(jīng)指定了位置，表示剩余的按先列后行排列，盡量排滿。

到此這篇關于CSS3 grid 布局的簡單使用的文章就介紹到這了,更多相關CSS3 grid 布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • 詳解css3中dispaly的Grid布局與Flex布局

    這篇文章主要介紹了css3中dispaly的Grid布局與Flex布局,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-09-11

  • CSS3中的display:grid，網(wǎng)格布局介紹

    這篇文章主要介紹了CSS3中的display:grid，網(wǎng)格布局介紹,需要的朋友可以參考下
    2019-10-30

  • 10分鐘理解CSS3 Grid布局

    Grid做前端的同學應該都很熟悉了，這篇文章主要介紹了10分鐘理解CSS3 Grid布局，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-20

最新評論