24-栅格布局详解(CSS3)

知识目标

  1. 理解栅格布局的概念和设计原理
  2. 了解常见的栅格布局框架

1. 栅格布局概述

栅格布局(Grid Layout)是一种基于网格系统的布局方式,通过将页面或屏幕划分为多个网格单元来实现页面的组织和布局。

2. CSS栅格(grid)布局

采用网格布局的区域,称为"容器"(container)。容器内部采用风格定位的子元素,称为"项目(item)"指直接子元素,对子元素的子元素不生效。

容器里面的水平区域称为" "(row),垂直区域称为" "(column)。

行和列的交叉区域,称为"单元格 "(cell)。

正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格。

任何一个容器都能指定grid布局:

bash 复制代码
.box {
	display:grid;  // 行内元素使用inline-grid;
}

注意:设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align等设置都将失效。

3. 常用父项选项

有如下父项选项,属性设置在父类容器里,作用在子项目上。

3.1 grid-template属性

此属性用来规定风格的行列:

  • grid-template-columns: 规定每列的宽高及列数
  • grid-template-rows: 规定每行的宽高及行数

    有多种写法:
  • 使用绝对单位。
    如以下例子,将项目划成三列,每列占120px; 此时,如果没有去设置行数 ,会自动将子项目分成3列,比如有10个子项目,就会成3列4行的布局,第4列单独一个子项目。但不能只设置行数,不设置列。
bash 复制代码
.container {
	display: grid;
	grid-template-columns: 120px 120px 120px;
}
  • 使用百分比
    可以为每行或每列设置不同占比,如下代码,给第1列占比百分30%, 第2列自动 (40%),第三列30%。给第1行占20%,第2行40%, 第三行30%,第四行剩下的空间
bash 复制代码
grid-template-columns: 30% auto 30%;
grid-template-rows: 20% 40% 30% auto;
  • repeat()
    有时候,重复写同样的值非常麻烦,尤其网格很多时。这时,可以使用**repeat()**函数,简化重复的值。如下代码:
bash 复制代码
<!-- 3列分别占33.33% -->
grid-template-columns: repeat(3, 33.33%);
<!-- 4行分别占25% -->
grid-template-rows: repeat(4, 25%);

**repeat()**接受两个参数,第一个参数表示重复次数,第二个参数是要重复的值。

bash 复制代码
<!-- 1和4列为100px  2和5列为20px 3和6列80px -->
grid-template-columns: repeat(3, 100px 20px 80px);

有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。

bash 复制代码
.container {
  display: grid;
  <!-- 表示每列宽度100px,然后自动填充,直到容器不能放置更多的列 -->
  grid-template-columns: repeat(auto-fill, 100px);
}
  • fr 关键字
    为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。
bash 复制代码
.container {
  display: grid;
  <!-- 表示两个相同宽度的列。-->
  grid-template-columns: 1fr 1fr;
}
  • minmax()
    **minmax()**函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
bash 复制代码
<!-- 上面代码中,minmax(100px, 1fr)表示列宽不小于100px,不大于1fr。-->
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

3.2 grid-gap属性

此属性用来规定行列的间距:

  • grid-row-gap: 设置行与行的间隔(行间距)
  • grid-column-gap: 设置列与列的间隔(列间距)
  • grid-gap: grid-column-gap和grid-row-gap的合并简写形式, 若所有的间距一样,可只写一个值。

根据最新标准,上面三个属性名的 grid- 前缀已经删除, grid-column-gap 和 grid-row-gap 写成 column-gap 和 row-gap , grid-gap 写成 gap 。

3.3 justify-items属性和align-items属性

justify-items属性 设置单元格内容的水平位置(左中右),align-items属性 设置单元格内容的垂直位置(上中下)。

这两个属性的写法完全相同,只是表示的意思不一样,可选值一样。

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。

    place-items为align-items和justify-items属性的简写方式。

3.4 justify-content属性和align-content属性

justify-content属性整个内容区域 在容器里面的水平位置(左中右),align-content 属性是整个内容区域的垂直位置(上中下)。

这两个属性的写法完全相同,都可以取下面这些值。

  • start - 对齐容器的起始边框。
  • end - 对齐容器的结束边框。
  • center - 容器内部居中。
  • stretch - 项目大小没有指定时,拉伸占据整个网格容器。
  • space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
  • space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。
  • space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。

    place-content属性align-content属性justify-content属性的合并简写形式。

4. 常用子项选项

属性写在子类里,作用自己身上。

4.1 grid-column和grid-row属性

  • grid-column-start属性:左边框所在的垂直网格线
  • grid-column-end属性:右边框所在的垂直网格线
  • grid-row-start属性:上边框所在的水平网格线
  • grid-row-end属性:下边框所在的水平网格线

4.2 grid-area属性

grid-area可以直接指定选中的项目的位置。

bash 复制代码
.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

4.3 justify-self和align-self属性

justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于当前的单个项目。

align-self属性 设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于当前的单个项目。

place-self属性align-self属性justify-self属性的复合属性。

相关推荐
IoOozZzzz23 分钟前
ES6-Set-Map对象小记
前端·javascript·es6
浪裡遊27 分钟前
利用flask设计接口
前端·后端·python·flask·web3.py·httpx
松树戈1 小时前
idea结合CopilotChat进行样式调整实践
前端·javascript·vue.js·copilot
溟洵2 小时前
【C++ Qt】输入类控件(上) LineEdit、QTextEdit
c语言·前端·c++·qt·前端框架
漫无目的行走的月亮2 小时前
VUE实现todolist
前端·vue.js·elementui
njsgcs3 小时前
chili3d调试10 网页元素css node deepwiki 生成圆柱体 生成零件图片
前端·css·3d
Мартин.3 小时前
[Meachines] [Hard] Holiday SQLI+XSS-Bypass+RCE-HEX-Shell+TRP00F+npm特權升級
前端·npm·xss
sasaraku.8 小时前
INP指标
前端
magic 24512 小时前
Spring 命名空间注入:p、c 与 .util 的深度解析
java·前端·spring
钢铁男儿12 小时前
Python基本语法(函数partial)
前端·javascript·python