CSS3 grid布局的简单使用介绍_F11 - 专业站长和开发者的学习网站

分享到

CSS3 grid布局的简单使用介绍

css 来源：互联网作者：佚名发布时间：2024-06-04 22:03:06 人浏览

摘要

CSS3 grid 网格布局的使用 1.概述如果你要做成以下的这种效果，你会怎么做？你可以选择使用absolute绝对定位为这些块元素定位，也可以使用多个盒子嵌套来实现。当然最简单的方法是使用

CSS3 grid 网格布局的使用

1.概述

如果你要做成以下的这种效果，你会怎么做？

你可以选择使用 absolute 绝对定位为这些块元素定位，也可以使用多个盒子嵌套来实现。

当然最简单的方法是使用 CSS3 grid网格布局。

grid 布局能够让我们更加灵活组织盒子的搭配方式。

2.一些概念

行和列的概念

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

容器和项目

<div>

</div>

上面的 div 就是容器，三个 span 都是项目。

在一个网格布局中，如果有 2 × 2 的四个网格，那么就会有 3 × 3 的网格线，因为一个网格有两遍。

在 grid 布局中，我们可以使用 fr 关键字，它的意思是 fraction，即片段的意思，下面的代码意为着第二列和第三列的列宽是 1:2 的关系，并且 fr 可以与 px 一起混用。

.content {

display:grid;

grid-template-columns:100px 1fr 2fr

}

3.一些关键属性实现文章开始的效果

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：确定元素的宽度是到哪一行结束。

由最后的四个属性可以确定元素的位置。

其他的元素没有特殊的设置就会是按照文档流的顺序排列。

我们直接以最开始的例子来理解这些属性。

代码：

// content 是容器

// 容器里面有四个项目

</div>

</template>

export default {

name: 'App'

}

</script>

.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);

}

// 注意下面所说的网格和网格线的区别， 3×3 的网格是有 4×4 的网格线的

.itemOne {

background-color: #ef342a;

// 项目一的列从第一个网格线开始

grid-column-start: 1;

// 项目一的列到第二个网格线结束

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;

// 项目二的列从第二个网格线开始

grid-column-start: 2;

// 项目二的列到第三个网格线结束

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;

// 项目三的列从第三个网格线开始

grid-column-start: 3;

// 项目三的列到第四个网格线结束

grid-column-end: 4;

// 项目三的行从第一个网格线开始

grid-row-start: 1;

// 项目三的行到第三个网格线结束

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.其他的一些属性

学会了以上的一些属性，就已经可以写出一定的效果了，至于每一个网格内，依然可以采用 flex 布局

其他的一些属性：

网格线可以设置名称

1	grid-template-columns：[line1] 100px [line2] 100px [line3] 100px [line4]

1	grid-template-columns：[line5] 100px [line5] 100px [line5] 100px [line8]

1	grid-column-start: c3; grid-column-end: c4;

在使用过程中可以用网格线的名字代替索引

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

1	grid-gap:20px 20px;

网格可以给每一个区域定义名字

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';

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

</div>

</template>

export default {

name: 'App',

}

</script>

.content {

display: grid;

/* 1.设置 display 为 grid */

width: 100vw;

height: 100vh;

grid-template-areas: "head head head"

"nav nav nav"

"foot main main";

/* 2.区域划分当前为三行三列 */

grid-template-rows: 100px 100px 100px;

/* 3.各区域宽高设置 */

grid-template-columns: 150px 150px 150px;

}

.itemOne {

grid-area: head;

/* 4. 指定当前元素所在的区域位置，从 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，用于有几个元素已经指定了位置，表示剩余的按行排列，并且尽可能填满（注意与row的区别，row不一定是排满的）
也可以是column dense，也是有几个元素已经指定了位置，表示剩余的按先列后行排列，尽量排满。

您可能感兴趣的文章 :

原文链接 :

Tag : CSS3(178)grid(3)

CSS3的常用样式属性和用法案例介绍

在网页设计中，CSS是一种强大的样式表语言，可以为网页添加各种各样的样式和效果。而CSS3作为CSS的第三个版本，引入了许多新的样式属性
CSS3 grid布局的简单使用介绍

CSS3 grid 网格布局的使用 1.概述如果你要做成以下的这种效果，你会怎么做？你可以选择使用absolute绝对定位为这些块元素定位，也可以使用
CSS实现鼠标悬停图片放大的多种方法

1.背景图片放大使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放大效
CSS鼠标悬浮动画-hover属性介绍

1. Grow-Shadow 鼠标移入盒子放大并出现底部阴影效果：代码 1 div class=box/div 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .box { width: 200px; height: 200px;
css3实现类似地图定位循环扩散光圈效果(最新推荐

1.效果图,重点opacity,animation,transform:scale 2.html 1 2 3 4 5 6 7 8 9 div class=icon-warnCom icon class=icon-warnsi class=dot/ii class=pulse/i/icon /div div class=icon-warnCo
CSS的Flexbox布局介绍

CSS Flexible Box Module（简称Flexbox）是一种现代化的布局模式，用于创建响应式的一维布局（无论是水平还是垂直）。它提供了对项目的对齐、
css3中的var()函数介绍

css3的var()函数变量要以两个连字符--(横杆)(减号)为开头变量可以在:root{}中定义, :root可以在css中创建全局样式变量。通过 :root本身写的样式
CSS中去掉li前面的圆点方法(常见方法汇总)

在网页开发中，我们经常会使用无序列表（ul）来展示一系列的项目。默认情况下，每个列表项（li）前面都会有一个圆点作为标记。然而，
CSS的Flexbox布局示例介绍

CSS Flexible Box Module（简称Flexbox）是一种现代化的布局模式，用于创建响应式的一维布局（无论是水平还是垂直）。它提供了对项目的对齐、
echarts图表鼠标悬停时图例错位的解决方案

1、问题：当页面body拥有zoom属性之后，鼠标划过echarts图表时，触发位置就不正常 2、原因分析：这都是因为设置了zoom，如果你在你的项目