Css3 - Grid网格布局

最新推荐文章于 2024-04-17 00:45:00 发布
最新推荐文章于 2024-04-17 00:45:00 发布
阅读量2.7k 收藏 10
点赞数 1
分类专栏： css3 文章标签： 网格 css3 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxyCyndi/article/details/79038730
版权

Grid - 二维网格布局

一、介绍

1. 原理

CSS网格布局是CSS中最强大的布局系统。 这是一个二维网格布局系统，这意味着它可以同时处理列和行，不像flexbox(盒模型)，它主要是一维系统。 通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），您可以使用网格布局。

2. 基础概念

使用Grid布局非常简单，你只需要给容器（container）定义：display:grid，并设置列（grid-template-columns）和 行（grid-template-rows）的大小，然后用grid-column和grid-row定义容器子元素（grid-item项目）的位置。与flexbox布局类似，一开始项目的排列顺序并不重要，可以放置在容器的任何位置，这也使得你非常容易通过媒体查询重新排列你的项目。

3.浏览器支持

截至2017年3月，许多浏览器都提供了原生的，前瞻性的对CSS Grid的支持：Chrome（包括Android），Firefox，Safari（包括iOS）和Opera。 另一方面，Internet Explorer 10和11支持它，但是这是一个过时的语法实现。 边缘支持已经宣布，但还没有到来。

这里写图片描述

二、重要术语

1.grid container（网格容器）

被定义为 display： grid 的元素，他是整个网格布局系统的容器（container），即是父元素。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

2. grid Item（网格项）

网格容器的子元素，下面的item元素是网格项，但sub-item不是。

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

3. grid line （网格线）

形成一个组成网格线的分界线。它们可以是列网格线（column grid lines），也可以是行网格线（row grid lines）并且居于行或列的任意一侧，下面黄色线就是列网格线。

这里写图片描述

4. grid track（网格轨道）

两个相邻的网格线之间为网格轨道。
你可以认为它们是网格的列或行，下面在第二个和第三个网格线之间的黄色部分为网格轨道。

这里写图片描述

5. grid cell（网格单元）

两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元。
下面行网格线1（row grid lines 1）、行网格线2（row grid lines 2）和列网格线2（column grid lines 2）、列网格线3（column grid lines 3）组成的黄色区域为网格单元。

这里写图片描述

6. grid area（网格区域）

网格区是由任意数量网格单元组成。
下面行网格线1（row grid lines 1）、行网格线3（row grid lines 3）和列网格线1（column grid lines 1）、列网格线3（column grid lines3）组成的黄色区域为网格区。

这里写图片描述

三、所有网格容器属性和网格元素属性

1.grid container 属性

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-column-gap
  • grid-row-gap
  • grid-gap
  • justify-items
  • align-items
  • justify-content
  • align-content
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow

2.grid item 属性


    grid-column-start
    grid-column-end
    grid-row-start
    grid-row-end
    grid-column
    grid-row
    grid-area
    justify-self
    align-self

四、grid container 属性

1. display: grid | inline-grid | subgrid;

属性值：
grid: 生成块级网格
inline-grid: 生成行内网格
subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。

注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。

2.grid-template-columns / grid-template-rows

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

1）属性值：
track-size: 轨道大小，可以使用css长度，百分比或用分数（用fr单位）。
line-name: 网格线名字，你可以选择任何名字。

2）案例
案例1:当你设置行或列大小为auto时，网格会自动分配空间和网格线名称。

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

这里写图片描述

案例2:给网格线定义名字，注意名字需要写在[]里面。

.container{
    display:grid;
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

这里写图片描述

3）特殊
1.每条网格线可以有多个名字，例如上面行的第二条线有两个名字，分别是row1-end和row2-start。

.container{
    display: grid;
    grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

2.如果你定义包含重复部分，可以使用repeat()简化。

.container{
    display: grid;
    grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
//等价于
.container{
    display: grid;
    grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

3.用fr单位可以将容器分为几等份，例如下面分成三等份。

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

4.如果fr单位和实际值一起使用，设置fr的行或列将分(除了实际值)剩余部分。

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

3.grid-template-areas

通过获取网格项中的grid-area属性值（名称），来定义网格模版。重复网格区（grid-area）名称将跨越网格单元格，‘.’代表空网格单元。

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

1)属性值：
grid-area-name: 网格项(grid item)的grid-area属性值（名字）
‘.’ : 空网格单元
none: 不定义网格区域

2)案例

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  grid-template-columns: 50px 50px 50px 50px;//4列
  grid-template-rows: auto;//3行
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

上述案例：上面代码示例会创建四列三行网格，第一行将是header，第二行前两个网格单元是main部分、第三个为空网格单元、第四个为sliderbar，第三行是footer。
这里写图片描述

4.grid-template

5.grid-column-gap/grid-row-gap

网格单元间距。

属性值：
line-size: 网格线间距,设置单位值。

.container{
    display:grid;
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px; 
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}

这里写图片描述

6.grid-gap：<grid-column-gap> <grid-row-gap>;

是grid-column-gap 和 grid-row-gap简写。
改写上述code

.container {
    display: grid;
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px;
    grid-gap: 10px 15px;
}

注：如果只设置一个值，那么grid-column-gap 和 grid-row-gap都为那个值。

7.justify-items

垂直于列网格线对齐，适用于网格容器里的所有网格项。

属性值：
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满（默认）。

.container{
    display:grid;
    justify-items: start / end/ center /stretch;
}

start
(start)
end
（end）
这里写图片描述
（center）
这里写图片描述
（stretch）

8.align-items

垂直于行网格线对齐，适用于网格容器里的所有网格项。

属性值：
start： 顶部对齐。
end： 底部对齐。
center： 居中对齐。
stretch：填满（默认）。

.container{
    display:grid;
    align-items: start/end/center/stretch;
}

这里写图片描述
(start)
这里写图片描述
(end)
这里写图片描述
(center)

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

如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于列网格线对齐）。
属性值：
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。
space-between: 两边对齐，网格项之间间隔相等。
space-evenly: 网格项间隔相等。

.container{
    display:grid;
    justify-content: start;
}

这里写图片描述
(start)
这里写图片描述
(end)
这里写图片描述
(center)
这里写图片描述
(stretch)
这里写图片描述
(space-around)
这里写图片描述
(space-between)
这里写图片描述
(space-evenly)

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

如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于行网格线对齐）。

属性值：
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。
space-between: 两边对齐，网格项之间间隔相等。
space-evenly: 网格项间隔相等。

11.grid-auto-columns/grid-auto-rows

自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。

属性值：
track-size: 网格轨道大小,可以是固定值，百分比或者是分数（fr单位）。
案例：

.container{
    display:grid;
    grid-template-columns: 60px 60px;
    grid-template-rows: 90px 90px
}

这里写图片描述
这是2✖️2的网格，但是我们来用grid-column 和 grid-row给网格项定位如下：

.item-a{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.item-b{
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}

这里写图片描述
我们可以看出，网格项item-b定位在第五根列网格线（column line 5 ）和第六根列网格线（column line 6 ）之间。但是我们网格容器根本不存在这两条网格线，所以就用两个0宽度来填充。在这里我们可以用网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）来定义这些隐式轨道宽度。

.container{
    display:grid;
    grid-auto-columns: 60px;
}

这里写图片描述

12.grid-auto-flow : row（默认） | column | dense ;

在没有设置网格项的位置时，这个属性控制网格项怎样排列。

属性值：
row: 按照行依次从左到右排列。
column: 按照列依次从上倒下排列。
dense: 按先后顺序排列。

案例：

<section class="container">
    <div class="item-a">item-a</div>
    <div class="item-b">item-b</div>
    <div class="item-c">item-c</div>
    <div class="item-d">item-d</div>
    <div class="item-e">item-e</div>
</section>
...
.container{
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: row;
}

....
.item-a{
    grid-column: 1;
    grid-row: 1 / 3;
}
.item-e{
    grid-column: 5;
    grid-row: 1 / 3;
}

if:由于我们设置了grid-auto-flow：row，item-b、item-c和item-d在行上是从左到右排列，如下：
这里写图片描述

if: grid-auto-flow: column;
这里写图片描述

四、Grid-item

1.grid-column-start

grid-column-start: <number> | <name> | span <number> | span <name> | auto ;

line: 指定带编号或者名字的网格线。
span <number>: 跨越轨道的数量。
span <name>: 跨越轨道直到对应名字的网格线。
auto: 自动展示位置，默认跨度为1。

2.grid-column-end

grid-column-end: <number> | <name> | span <number> | span <name> | auto ;

3.grid-row-start

grid-row-start: <number> | <name> | span <number> | span <name> | auto ;

4.grid-row-end

grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

案例1：

.item-a{
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

这里写图片描述

案例2：

.item-b{
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

这里写图片描述

5.grid-column: / grid-row:

-是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。

grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
grid-row: <start-line> / <end-line> | <start-line> / span <value> ;

案例：

.item-c{
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

这里写图片描述

6.grid-area

 grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>

属性值：
name: 项目名子。
<row-start> / <column-start> / <row-end> / <column-end>: 可以是数字或网格线名字(逆时针方式)。

案例：

.item-d{
  grid-area: 1 / col4-start / last-line / 6 ;
}

这里写图片描述

7. justify-self: justify-self: start | end | center | stretch;

定义单个网格项垂直于列网格线的对齐方式。

属性值：
start: 网格区域左对齐。
end: 网格区域右对齐。
center: 网格区域居中。
stretch: 网格区域填满。
案例：

.item-a{
  justify-self: start/end/center/stretch;
}

这里写图片描述
(start)
这里写图片描述
(end)
这里写图片描述
(center)
这里写图片描述
(stretch)

注意：也可以在容器上设置justify-items，达到全部网格项对齐。

8.align-self

align-self: start | end | center | stretch;

定义单个网格项垂直于行网格线的对齐方式。

属性值：
start: 网格区域顶部对齐。
end: 网格区域底部对齐。
center: 网格区域居中。
stretch: 网格区域填满。

案例：

.item-a {
    align-self: start/end/center/stretch
}

这里写图片描述
这里写图片描述
这里写图片描述

这里写图片描述

参考文档

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
  2. https://css-tricks.com/snippets/css/complete-guide-grid/
  3. https://www.jianshu.com/p/d183265a8dad
yxy_elena
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Css3新布局---Grid网格
m0_66711291的博客
08-02 2388
网格布局是css3中新增加的一种布局方式，比flex更加强大。flex属于一维布局，对于高度不能灵活控制。grid网格布局是二维布局，通过行和列来分配网页空间。通过下面这个小游戏可以简单体会到网格布局的强大。...
CSS3 grid网格布局
xiangxiongfly
04-26 1303
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。
CSS的Grid布局详解（ 示例代码 ）
最新发布
大剑师兰特的GIS世界
04-17 733
CSS Grid布局是一种二维布局系统，它允许开发者在网页中创建具有复杂网格结构的布局，可以精确控制每一行和每一列的大小、对齐以及项目的放置位置。Grid布局提供了极其灵活的方式来设计和调整布局，特别适合于网页设计中需要精细划分区块和复杂交互布局的需求。
一篇文章搞懂CSS3网格布局（Grid）
知行合一，跬步致远
08-13 860
<!-- div class="asset-body" --> <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。 <!-- /div --> <!-- di...
CSS3中的display:grid网格布局介绍 flex升级版grid
夜空孤狼啸的博客
05-18 751
grid网格布局，就是将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
CSS3网格布局
MyBlog
05-17 349
简介 网格布局可以将容器划分为各种网格，可以对这些网格进行任意的组合，组成网格分界线的有行网格线和列网格线，由两两相邻的行网格线和列网格线组成的单元格叫做网格单元格。 注意：划分的网格并不是div，div存在与划分的网格之中，具体看以下实例。 <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <
Css-grid 网格布局介绍
01-05
概要：CSS Grid 布局是目前 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。它的目标是完全改变我们基于网格的用户界面的布局方式。 ...
CSS Grid 网格布局全解析
09-24
《CSS Grid 网格布局全解析》 CSS Grid（网格布局）是现代网页设计中一个强大的工具，它使得创建复杂、响应式的二维布局变得轻松简单。Grid布局摒弃了传统布局模式的限制，让我们可以自由地定义网页的行和列，以及...
css3-grid-layout.rar_CSS3_DEMO_divisiondml_六边形_网格布局
09-21
使用CSS3实现六边形网格页面布局，该demo可用于CSS3学习和类似布局参考
详解jQuery移动页面开发中的ui-grid网格布局使用
11-23
Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局，叫做ui-grid Jquery Mobile 提供有四个预设的布局，可以在任何情况下都需要列 两列（使用ui-grid-a类） 三列（使用ui-grid-b类） 四列（使用ui-...
css-网格布局-详情
08-01
CSS 网格布局（Grid Layout）是一种强大的二维布局系统，允许开发者轻松地创建复杂的、响应式的网页布局。相比于Flex布局，Grid布局更加适合处理二维布局的问题，因为它将容器划分为行和列，生成单元格，进而定位...
css3 布局、flex布局、grid布局的常用属性(笔记)
weixin_60547084的博客
08-16 1019
grid-column: grid-column-start / grid-column-end，简写方式。如果当前有三列，start 所对应的就是1、2、3，而end 所对应的就是2、3、4，写其中一个就可以。当前网格的开始与结束位置，一个单元格表示 1，两个单元格表示 2。注意：如果 n 大于当前总列数，并不会到第二行去，而是会添加列。row-reverse：水平摆放，相反(123 变 321)column-reverse：垂直摆放，相反。row：水平摆放(默认)column：垂直摆放。......
Grid网格布局详细讲解
qwguo
06-12 8219
‘Grid是CSS3中网格布局系统，也是CSS3中最强大的布局系统。它是一个二维布局系统，这意味着它可以处理列和行，不像flex弹性布局主要是一维系统，他像表格一样可以让我们控制行或者例对齐，可以控制子元素跨行或者跨列，但是他比表格更加灵活，它的子元素可以单独定位就像CSS定位元素一样，同时还可以重叠单元格。’ ‘您可以使用网格布局，通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（它们成为网格项）’ css3中的grid布局学习 基本概念 我们这里用我们最熟悉城市街道来理解这些概念。 .
css【详解】grid布局—— 网格布局（栅格布局）
热门推荐
朝阳39的博客
04-11 4万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
css3网格布局和弹性布局比较
weixin_45441470的博客
11-21 364
CSS3中的网格布局（Grid Layout）和弹性布局（Flexbox）是两种用于创建响应式和灵活布局的强大工具。
CSS3 网格布局
A12536365214的博客
10-18 771
使用 `grid-template-rows` 和 `grid-template-columns` 属性来定义网格的行和列结构。你可以使用像 `1fr`、`auto`、`20px` 这样的值来定义行高和列宽。
css3之网格布局
qq_42628504的博客
08-23 637
一网格布局（Grid）是最强大的 CSS 布局方案。 本文参考自 阮一峰的网络日志 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别
通过CSS3进行网站架构网格布局的代码实例教程
axingxiansen的博客
04-01 343
CSS3模块家族中，CSS3网格布局模块是最有趣的一个。W3C官网自发布草案到今天不到一年时间。有一点必须注意，早在2007年宣布的WD版本中，有些名称和语法有一些变化，但是他们具有相同的本质。今天模块正在前速向前，在IE10中已经初步实现，希望新的特性在将来能得到支持以及其他流行浏览器也将支持这个模块。为什么我们需要网格布局？CSS3网格布局模块的一个任务是帮助我们处理非常简单和清晰的任何web-imposer（不仅），很有可能是一个内容块在一个虚拟的网络位置。
Css 网格布局 grid-template-areas
11-17
`grid-template-areas`属性是CSS网格布局中用于定义网格模板的属性。它允许我们通过指定网格区域的名称来创建一个网格模板，从而更轻松地布局网格项。以下是一个例子： ```css .container { display: grid; grid-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值