Grid布局

最新推荐文章于 2024-03-21 19:35:14 发布
最新推荐文章于 2024-03-21 19:35:14 发布
阅读量322 收藏 2
点赞数 1
分类专栏： Css 文章标签： css 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47218954/article/details/129222020
版权

Grid 布局即网格布局，擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。是二维布局，它将容器划分为了行和列，产生了一个个网格（一个m行n列的网格，需要使用m+1条横向，n+1条纵向网格线组成）。常用于整个页面的规划。可以通过display: grid设置。

设置了display: grid属性的元素称为“grid容器”。grid布局中每个网格内部的元素称为grid项目。

  1. grid容器的属性

grid-template-rows与grid-template-columns

前者表示划分行，后者表示划分列，下面来看七种取值情况。

情况一：数值

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: 50px 50px 50px;
    grid-template-columns: 50px 50px 50px;
}

如上，划分了一个3*3的网格布局，每个网格长为50px,宽也为50px。在浏览器工具中，将右上角的箭头选中，即可查看网格

情况二：%

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: 20% 40% 40%;
    grid-template-columns: 50px 50px 50px;
}

如上，还是划分了一个3*3的网格布局，不过这次通过%取值 ,按照grid容器的height进行分割

情况三：repeat函数

如果要划分一个20*20的网格，按照上面两种办法，就要写20组数据，太过麻烦，简单写法是通过repeat函数，如下

.box {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: repeat(20, 12px);
    grid-template-columns: repeat(20, 12px);
}

repeat(n,m) n:重复次数，m:重复的数值。如上，划分了一个20*20的网格，每个网格的行高与列宽都是12px。

情况四：auto-fill(自动填充)

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: repeat(auto-fill, 30%);
    grid-template-columns: repeat(4, 25%);
}

auto-fill应用在repeat函数中，代表根据需要重复的值，自动填充数量，如上，行高为30%，进行自动填充，直到height剩余部分不满30%，则不再填充。

情况五：auto

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: 50px auto 50px;
    grid-template-columns: auto auto auto;
}

auto表示自动填充剩余部分，多个auto则平分剩余部分

情况六:fr片段划分

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: 1fr 2fr 3fr;
    grid-template-columns: auto auto auto;
}

网格布局自带的fr关键字，意为片段，用来表示比例关系。如上，行高之比分别为1：2：3

情况七：minmax函数

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: 50px 50px minmax(50px, 80px);
    grid-template-columns: 50px 50px minmax(80px, 150px);
}

minmax(min, max)；min代表最小值，max代表最大值。如果剩余长度大于最大值，则使用最大值（如上述行高）。如果剩余长度小于最大值且大于最小值，则使用剩余长度（如上述列宽）。如果剩余长度小于最小值，则使用最小值（会超出grid容器，如下的列宽）

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: 50px 50px minmax(50px, 80px);
    grid-template-columns: 50px 50px minmax(110px, 150px);
}

grid-row-gap与grid-column-gap与grid-gap

前者表示划分行间距，中间表示划分列间距，后者是前两者的复合形式

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: 50px 50px 50px;
    grid-template-columns: 50px 50px 50px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}

grid-gap: 10px 10px是划分间距的复合形式，第一个参数是行间距，第二个参数是列间距。

grid-template-areas 、grid-area

grid-template-areas 属性在网格布局中规定区域，一个区域可由单个或多个单元格组成

grid-template-areas: 'a a b'
                     'a a b'
                     'c c c'; /* 三行 三列 */
上述示例，设置了3个区域，区域名字分别为a,b,c。它们所占整个网格的占比和它们的数量有关，位置也与上述写法一致
grid-template-areas: 'a b'
                     'a a' /* 两行 两列 */
上述示例，设置了2个区域，区域名字分别为a,b

grid-template-areas 一般与grid-area搭配使用。grid-area 属性指定项目位于哪一个区域

.box {
    margin: 100px auto;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, auto);
    grid-template-areas: 'a a b'
                         'a a b'
                         'c c c';
}

.a {
    grid-area: a;
    background-color: cornflowerblue;
}

.b {
    grid-area: b;
    background-color: rgb(7, 61, 160);
}

.c {
    grid-area: c;
    background-color: rgb(1, 12, 31);
}
<div class="box">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

控制项目的属性

当在grid布局中添加项目时，项目会默认撑开显示在网格内部，默认情况下，项目会从左到右、从上到下显示。而当给项目添加宽高时，就按宽高来，不再是撑开显示在网格内部了。

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

1设置了宽高，按宽高来

4未设置宽高，默认撑开网格

<div class="box">
    <div style="width:20px;height:20px">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

grid-auto-flow

grid-auto-flow: row | column;

用来调整项目的显示顺序

  • row：项目横向显示，默认

  • column：项目纵向显示

.box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 100px auto;
    display: grid;
    grid-template-rows: 50px 50px 50px;
    grid-template-columns: 50px 50px 50px;
    grid-auto-flow: column;
}

justify-items

justify-items：start | center | end | stretch

项目在网格中的水平对齐方式，其中 stretch 为默认值，表示拉伸，占满单元格的整个宽度（未定义宽度时）

从左到右，从上到下，分别是start | center | end | stretch，其中，第4幅，未设置宽高。

align-items

align-items：start | center | end | stretch

项目在网格中的垂直对齐方式，与justify-items使用方式相同

place-items

place-items: <align-items> <justify-items>

项目在网格中的对齐方式，为垂直、水平的复合属性，第一个参数为控制垂直，第二个参数为控制水平。

控制整体网格的属性

justify-content

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

控制网格在grid容器内的水平位置

  • start - 对齐容器的起始边框

  • end - 对齐容器的结束边框

  • center - 容器内部居中

  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

  • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔

  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

  • stretch - 项目大小没有指定时，拉伸占据整个网格容器

如图，定义了3行2列的网格，从左向右分别是start center end space-around space-between space-evenly stretch，且所有项目都未指定大小。

align-content

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

控制网格在grid容器内的垂直位置，与justify-content使用方式相同

place-content

place-content: <align-content> <justify-content>

网格在容器中的对齐方式，为垂直、水平的复合属性，第一个参数为控制垂直，第二个参数为控制水平。

  1. grid项目的属性

合并单元格

grid-column-start 、grid-column-end 、grid-row-start 、grid-row-end

  • grid-column-start 属性：左边框所在的垂直网格线

  • grid-column-end 属性：右边框所在的垂直网格线

  • grid-row-start 属性：上边框所在的水平网格线

  • grid-row-end 属性：下边框所在的水平网格线

如上，定义了一个4*3的网格，其中左上方和右下方是需要合并单元格

/* 左上方合并css */
.left_top {
    background-color: rgb(12, 119, 122);
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}
/* 右下方合并css */
.right_bottom {
    background-color: rgb(127, 196, 173);
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 5;
}

结合图可以看出，grid-column-start从第几条网格线开始，grid-column-end到第几条网格线结束,这一部分的所有单元格进行合并。grid-row-xxx同理。

grid-column 、grid-row

是以上的简写形式

grid-row：n/m (n表示从第几条网格线开始，m表示到第几条网格线结束)

grid-column：n/m (n表示从第几条网格线开始，m表示到第几条网格线结束)

/* 左上方合并css */
.left_top {
    background-color: rgb(12, 119, 122);
    grid-row: 1/3;
    grid-column: 1/3;
}
/* 右下方合并css */
.right_bottom {
    background-color: rgb(127, 196, 173);
    grid-row: 3/5;
    grid-column: 3/4;
}
khkkm
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
grid.rar_grid布局
09-20
最简单的grid布局，九宫格有4*4条线组成,因此子元素的值为1~4
《十二》CSS3 Grid 网格布局
花铛
12-09 1040
网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Flex 布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局。适用于一个方向上的布局。Grid布 局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。适用于有行有列的布局。Grid 布局远比 Flex 布局强大。
CSS 详解grid布局（网格布局）与应用
最新发布
zzylj的博客
03-21 1421
CSS 详解grid布局（网格布局）与应用
阮一峰老师 CSS Grid 网格布局教程(转载)
热门推荐
鸭绒的博客
09-30 2万+
特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。 <!-- div class="asset-body" --> <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.
grid布局
lv_suri的博客
07-13 1037
grid布局概括：flex布局是一堆布局，grid是二维布局flex考虑的是项目按行或列布局，grid布局需要同时考虑行和列设置grid容器：.container{ Display:grid;Grid-template-columns:100px 100px 100px;Grid-template-rows:100px 100px 100px }.container{ Display:grid;Grid-template-columns:100px 1fr 2fr;Grid-temp
grid布局demo.html
02-02
grid布局demo.html
CSS Grid布局
02-01
关于前端页面布局的开发大会ppt，讲解了CSS layout中的Grid
使用CSS Grid布局实现网格的流动
09-25
主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）...
5分钟教你学会 CSS Grid 布局
12-11
Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。 CSS Grid 今年也获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持，所以我相信所有的前端开发人员都必须在不久的将来学习...
Grid布局综合Demo案例
05-27
Grid布局综合使用
10分钟理解CSS3 Grid布局
09-22
Grid做前端的同学应该都很熟悉了，这篇文章主要介绍了10分钟理解CSS3 Grid布局，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于grid布局实现的响应式栅格系统
09-10
基于grid布局实现的响应式栅格系统
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
12-13
上一篇《CSS Grid布局教程之什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语，为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不...
Grid 布局
ciguanpeng7618的博客
06-22 125
1：基本布局 Grid 布局是二维的基于网格的布局系统，它可以同时处理列和行（这是对比flex弹性盒模型布局而言）；第一个专门为解决布局问题而生的CSS模块。 几个基本概念： Grid Container，又叫做Grid容器，就是设置了display：grid的元素。 .main{ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值