grid 布局（css grid布局）



grid布局是CSS中的一种布局系统，它允许开发者通过定义行和列来创建网格结构，并控制网格项在网格中的位置和大小。

Grid布局：

• 二维布局系统：
  Grid布局是为了 解决二维布局系统而设计的，允许同时控制行和列的布局，非常适合创建复杂的网格结构。
• 定义结构：
  通过定义和定义网格的行和列。通过定义网格区域，以及和等属性在项目上控制当个网格项的位置
• 单元格：
  Grid布局强调的是将页面划分为一个个单元格，每个单元格可以换分不同的元素，非常适合对称和不对称的布局。

flex布局：

• 一维布局系统：Flex布局主要用于一维空间的布局，即沿着一个轴（横向或纵向分配空间，非常适合列表、导航条、工具栏、页脚等元素的排列）
• 流动和对齐：通过控制元素的排列方向，和等属性控制元素在主轴和交叉轴上的布局方式
• 自适应：flex布局擅长让容器内的项目自动调整大小以适应可用的空间。

flex布局的相关内容参见：https://blog.csdn.net/mantou_riji/article/details/?

在开发过程中这两种布局可以一起使用来实现更丰富的布局效果。

• 容器：将一个元素设置为，该元素就变成了网格容器。它定义了一个包含子元素的网格布局上下文。
• 网格项( Grid 项 )：网格容器内的子元素自动成为网格项，他们按照网格容器定义的布局规则排列。
• 行（Rows）与列（Columns）：Grid布局通过定义行和列来创建网格结构。行和列的大小通过各种Grid属性来控制。
• 网格线：划分网格的水平和垂直线
• 网格轨道：网格轨道是相邻两个网格线之间的空间，可以是行轨道或列轨道。
• 网格单元：由行和列形成的单个空间，grid布局的最基本的布局单位。
• 区域：使用属性，可以为网格定义命名区域。这样就可以通过名称而不是行和列的数字来放置Grid项。

eg：

grid-template-rows

• none：表示不明确的网格，所有的行和其大小都将由grid-auto-rows 属性隐式的指定。
• ：非负值的长度大小
• ：非负值且相对于网格容器的百分比。
• ：非负值，用单位 来定义网格轨道大小的弹性系数。每个定义了 的网格轨道会按比例分配剩余的可用空间。
• ：是一个用来表示以来占据网格轨道的关键字。
• ：是一个用来表示以来占据网格轨道的关键字。
• ：是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。
• ：如果该网格轨道为最大时，该属性等同于 ，为最小时，则等同于 。
• 
  length：表示划分为的行数
  percentage：表示每行的高度
• 
  表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复行的表达式。
  positive-integer：表示要设置相同行的个数
  track-list：表示设置每行的高度

eg：

grid-template-columns

grid-template-areas

• none：网格容器没有定义任何的网格区块 (grid areas)。
• ：多行字符串，一行字符串代表一个表格行，一个字符串中使用空格分割，分割的每一个单元代表每一列。
• 空格分割后的每一个单词表示一个网格项，若单词相同表示这两个网格项表示为一个网格区块，存储一个元素即可，同时如果元素要放在该网格区块需要设置css的属性为该网格区块的表示单词。（注意：最后有几个网格块，该容器内就应该有几个元素）。

示例1：

示例2：

grid-template

grid-template 是CSS 属性、、简写，用以定义网格中行、列与分区。

eg：

如果没有使用显示网格属性就会默认使用隐式网格属性。

grid-auto-rows

：用于指定隐式创建的行轨道大小。

取值：

• ：一个非负的长度。
• ：相对于网格窗口块尺寸的非负 值。如果网格容器的块尺寸是不确定的，则百分比值将被视为 auto。
• ：非负的、以为单位的维度，指定轨道的弹性因子。每个 尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。
• :：关键词，指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。
• ：关键词，指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。
• ：函数符号，定义一个不小于min且不大于max的尺寸范围。
• ：根据内容大小设置行高。

eg：

grid-auto-columns

eg：

grid-auto-flow

• row：该关键字指定自动布局算法按照通过来排列元素，在必要时增加新行。如果既没有指定 row 也没有 column，则默认为 row。
• column：该关键字指定自动布局算法通过来排列元素，在必要时增加新列。
• dense：该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

的取值可以是上述取值的一个或两个。

eg：

如果修改为·

column-gap（ grid-column-gap）

• normal表示列之间的间隔宽度。在 时默认间隔为 1em，其他类型布局默认间隔为 0。
• ：用 来定义列之间的间隔大小。而且 值必须是非负数的。
• ：用（百分比）来定义列之间的间隔大小。

row-gap （ grid-row-gap）

• 
  定义了 ，其包含 。
• 
  通过 grid-template-rows 属性显式设置行轨道来设置自动流（grid-template-columns 属性设为 none）
  通过 grid-auto-columns 明确该如何自动重复列轨道（同时grid-auto-rows属性设为 auto）
  grid-auto-flow 属性也被相应的设置为 ，并可附有 dense。
  所有其余 grid 次级属性被重置为初始值。
• 
  通过 grid-template-columns 属性显式设置列轨道来设置自动流（grid-template-rows 属性设为 none）
  通过 grid-auto-rows 明确该如何自动重复行轨道（同时grid-auto-columns属性设为 auto）
  grid-auto-flow 属性也被相应的设置为 ，并可附有 dense。
  所有其余 grid 次级属性被重置为初始值。

其他取值示例：

justify-items、align-items 、place-items

• start：对齐单元格的起始边缘
  
• end：对齐单元格的结束边缘
  
• center：单元格内部居中
  
• stretch：拉伸，占满单元格的整个宽度（默认值）
  

justify-content、align-content 、place-content

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），包括items和空白的分布空间，
align-content 属性是整个内容区域的垂直位置（上中下）。
它们都有如下的属性值：

• start：对齐单元行的起始边缘
  
• end：对齐单元行的结束边缘
  
• center：单元行内部居中
  
• stretch：拉伸，占满单元格的整个宽度（默认值）
  
• space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍；
  
• space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔；
  
• space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔；
  

CSS属性指定了一个网格项的列的开始位置， 左边框所在的垂直网格线。

取值：

• auto
  关键字，指示该属性对网格项的放置没有任何影响。
• 
  取值为具有的名称
• n
  将第 n 条网格线用于放置网格项。如果给定负整数，则从显式网格的端边缘开始反向计数，为0无效，默认是1。
• 
  取所有名称为的列的第n个作为起始值
• 
  为网格单元定义一个，表示两个列之间的距离是n个单位单元列的宽度。
  的值不能取span

示例：

eg：

grid-row 属性是一种 的缩写（shorthand）形式。两个取值之间使用分割。

若：

则：

grid-column CSS 属性是 的简写属性。两个属性之间使用进行分割。

CSS 属性 grid-area 是一种对于 （按照该顺序）的简写。之间使用进行分割。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/23717.html