CSS网格教程:网格布局模块/网格容器/网格项目
目录
CSS 网格布局模块
网格布局
浏览器支持
网格元素
实例
Display 属性
实例
实例
网格列(Grid Columns)
网格行(Grid Rows)
网格间隙(Grid Gaps)
实例
实例
实例
实例
网格行(Grid Lines)
实例
实例
CSS 网格容器
网格容器
grid-template-columns 属性
实例
实例
grid-template-rows 属性
实例
justify-content 属性
实例
实例
实例
实例
实例
实例
align-content 属性
实例
实例
实例
实例
实例
实例
CSS 网格项目
子元素(项目)
grid-column 属性:
实例
实例
实例
grid-row 属性:
实例
实例
grid-area 属性
实例
实例
命名网格项
实例
实例
实例
实例
项目的顺序
实例
实例
CSS 网格布局模块
亲自试一试
网格布局
CSS 网格布局模块(CSS Grid Layout Module)提供了带有行和列的基于网格的布局系统,它使网页设计变得更加容易,而无需使用浮动和定位。
浏览器支持
所有现代浏览器均支持网格属性。
![]() |
||||
网格元素
网格布局由一个父元素以及一个或多个子元素组成。
实例
<div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div><div class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div>
</div>
亲自试一试
Display 属性
当 HTML 元素的 display
属性设置为 grid
或 inline-grid
时,它就会成为网格容器。
实例
.grid-container {display: grid;
}
亲自试一试
实例
.grid-container {display: inline-grid;
}
亲自试一试
网格容器的所有直接子元素将自动成为网格项目。
网格列(Grid Columns)
网格项的垂直线被称为列。
![](/assets/blank.gif)
网格行(Grid Rows)
网格项的水平线被称为行。
![](/assets/blank.gif)
网格间隙(Grid Gaps)
每列/行之间的间隔称为间隙。
![](/assets/blank.gif)
可以通过使用以下属性之一来调整间隙大小:
grid-column-gap
grid-row-gap
grid-gap
实例
grid-column-gap
属性设置列之间的间隙:
.grid-container {display: grid;grid-column-gap: 50px;
}
亲自试一试
实例
grid-row-gap
属性设置行之间的间隙:
.grid-container {display: grid;grid-row-gap: 50px;
}
亲自试一试
实例
grid-gap
属性是 grid-row-gap 和 grid-column-gap 属性的简写属性:
.grid-container {display: grid;grid-gap: 50px 100px;
}
亲自试一试
实例
grid-gap
属性还可用于将行间隙和列间隙设置为一个值:
.grid-container {display: grid;grid-gap: 50px 100px;
}
.grid-container {display: grid;grid-gap: 50px;
}
亲自试一试
网格行(Grid Lines)
列之间的线称为列线(column lines)。
行之间的线称为行线(row lines)。
![](/assets/blank.gif)
当把网格项目放在网格容器中时,要引用行号:
实例
把网格项目放在列线 1,并在列线 3 结束它:
.item1 {grid-column-start: 1;grid-column-end: 3;
}
亲自试一试
实例
把网格项目放在行线 1,并在行线 3 结束它:
.item1 {grid-row-start: 1;grid-row-end: 3;
}
亲自试一试
CSS 网格容器
亲自试一试
网格容器
如需使 HTML 元素充当网格容器,必须把 display
属性设置为 grid 或 inline-grid。
网格容器由放置在列和行内的网格项目组成。
grid-template-columns 属性
grid-template-columns
属性定义网格布局中的列数,并可定义每列的宽度。
该值是以空格分隔的列表,其中每个值定义相应列的长度。
如果我们希望网格布局包含 4 列,可以指定这 4 列的宽度;如果所有列都应当有相同的宽度,则设置为 "auto"。
实例
生成包含四列的网格:
.grid-container {display: grid;grid-template-columns: auto auto auto auto;
}
亲自试一试
注意:如果在 4 列网格中有 4 个以上的项目,则网格会自动添加新行并将这些项目放入其中。
grid-template-columns
属性还可以用于指定列的尺寸(宽度)。
实例
设置这 4 列的尺寸:
.grid-container {display: grid;grid-template-columns: 80px 200px auto 40px;
}
亲自试一试
grid-template-rows 属性
grid-template-rows
属性定义每列的高度。
它的值是以空格分隔的列表,其中每个值定义相应行的高度:
实例
.grid-container {display: grid;grid-template-rows: 80px 200px;
}
亲自试一试
justify-content 属性
justify-content
属性用于在容器内对齐整个网格。
注意:网格的总宽度必须小于容器的宽度,这样 justify-content 属性才能生效。
实例
.grid-container {display: grid;justify-content: space-evenly;
}
亲自试一试
实例
.grid-container {display: grid;justify-content: space-around;
}
亲自试一试
实例
.grid-container {display: grid;justify-content: space-between;
}
亲自试一试
实例
.grid-container {display: grid;justify-content: center;
}
亲自试一试
实例
.grid-container {display: grid;justify-content: start;
}
亲自试一试
实例
.grid-container {display: grid;justify-content: end;
}
亲自试一试
align-content 属性
align-content
属性用于垂直对齐容器内的整个网格。
注意:网格的总高度必须小于容器的高度,这样 align-content 属性才能生效。
实例
.grid-container {display: grid;height: 400px;align-content: center;
}
亲自试一试
实例
.grid-container {display: grid;height: 400px;align-content: space-evenly;
}
亲自试一试
实例
.grid-container {display: grid;height: 400px;align-content: space-around;
}
亲自试一试
实例
.grid-container {display: grid;height: 400px;align-content: space-between;
}
亲自试一试
实例
.grid-container {display: grid;height: 400px;align-content: start;
}
亲自试一试
实例
.grid-container {display: grid;height: 400px;align-content: end;
}
亲自试一试
CSS 网格项目
亲自试一试
子元素(项目)
网格容器包含网格项目。
默认情况下,容器在每一行的每一列都有一个网格项目,但是可以设置网格项目的样式,让它们跨越多个列和/或行。
grid-column 属性:
grid-column
属性定义将项目放置在哪一列上。
可以定义项目的开始位置以及结束位置。
注释:grid-column
属性是 grid-column-start 和 grid-column-end 属性的简写属性。
如需放置某个项目,可以引用行号(line numbers),或使用关键字 "span" 来定义该项目将跨越多少列。
实例
使 "item1" 从第 1 列开始并在第 5 列之前结束:
.item1 {grid-column: 1 / 5;
}
亲自试一试
实例
使 "item1" 从第 1 列开始,并跨越 3 列:
.item1 {grid-column: 1 / span 3;
}
亲自试一试
实例
使 "item2" 从第 2 列开始,并跨越 3 列:
.item2 {grid-column: 2 / span 3;
}
亲自试一试
grid-row 属性:
grid-row
属性定义了将项目放置在哪一行。
可以定义项目的开始位置以及结束位置。
注释:grid-row
属性是 grid-row-start 和 grid-row-end 属性的简写属性。
如需放置项目,可以引用行号,或使用关键字 "span" 定义该项目将跨越多少行:
实例
使 "item1" 在 row-line 1 开始,在 row-line 4 结束:
.item1 {grid-row: 1 / 4;
}
亲自试一试
实例
使 "item1" 从第 1 行开始并跨越 2 行:
.item1 {grid-row: 1 / span 2;
}
亲自试一试
grid-area 属性
grid-area
属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
实例
使 "item8" 从 row-line 1 和 column-line 2 开始,在 row-line 5 和 column line 6 结束:
.item8 {grid-area: 1 / 2 / 5 / 6;
}
亲自试一试
实例
使 "item8" 从 row-line 2 和 column-line 开始,并跨越 2 行和 3 列:
.item8 {grid-area: 2 / 1 / span 2 / span 3;
}
亲自试一试
命名网格项
grid-area
属性也可以用于为网格项目分配名称。
可以通过网格容器的 grid-template-areas
属性来引用命名的网格项目。
实例
item1 的名称是 "myArea",并跨越五列网格布局中的所有五列:
.item1 {grid-area: myArea;
}
.grid-container {grid-template-areas: 'myArea myArea myArea myArea myArea';
}
亲自试一试
每行由撇号(' ')定义。
每行中的列都在撇号内定义,并以空格分隔。
注释:句号表示没有名称的网格项目。
实例
让 "myArea" 跨越五列网格布局中的两列(句号代表没有名称的项目):
.item1 {grid-area: myArea;
}
.grid-container {grid-template-areas: 'myArea myArea . . .';
}
亲自试一试
如需定义两行,可以在另一组撇号内定义第二行的列:
实例
使 "item1" 跨越两列和两行:
.grid-container {grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}
亲自试一试
实例
命名所有项目,并制作一张随时可用的网页模板:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }.grid-container {grid-template-areas:'header header header header header header''menu main main main right right''menu footer footer footer footer footer';
}
亲自试一试
项目的顺序
网格布局允许我们将项目放置在我们喜欢的任意位置。
HTML 代码中的第一项不必显示为网格中的第一项。
实例
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
亲自试一试
可以通过使用媒体查询来重新排列某些屏幕尺寸的顺序:
实例
@media only screen and (max-width: 500px) {.item1 { grid-area: 1 / span 3 / 2 / 4; }.item2 { grid-area: 3 / 3 / 4 / 4; }.item3 { grid-area: 2 / 1 / 3 / 2; }.item4 { grid-area: 2 / 2 / span 2 / 3; }.item5 { grid-area: 3 / 1 / 4 / 2; }.item6 { grid-area: 2 / 3 / 3 / 4; }
}
亲自试一试
CSS网格教程:网格布局模块/网格容器/网格项目相关推荐
- 微信小程序CSS Flexbox(弹性盒子)布局模块
容器中使用flexbox flexbox的模型 当元素表现为 flex 框时,它们沿着两个轴来布局: 名词说明 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行 ...
- css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
- Grid网格布局、Grid容器和Grid项目
1. Grid网格布局(基础知识) ①Grid容器(container)和项目(item) 采用grid网格布局的元素,称为Grid容器 display:grid|inline-grid; Grid容 ...
- 响应式网格项目动画布局_响应式网格及其实际使用方式:常见的UI布局
响应式网格项目动画布局 重点 (Top highlight) 第二部分 (Part II) Now that you have a basic understanding of how to use ...
- 安卓APP_ 布局(5) —— GridLayout网格布局
摘自:安卓APP_ 布局(5) -- GridLayout网格布局 作者:丶PURSUING 发布时间: 2021-04-12 00:08:31 网址:https://blog.csdn.net/we ...
- 【Java AWT 图形界面编程】LayoutManager 布局管理器 ④ ( GridLayout 网格布局 | GridBagLayout 网格包布局 )
文章目录 一.GridLayout 网格布局 二.GridLayout 构造函数 三.GridLayout 网格布局代码示例 四.GridBagLayout 网格包布局 一.GridLayout 网格 ...
- jquery时间网格_10个最迷人的jQuery网格
jQuery通常是大多数想在JavaScript编程中扎根的人的首选,因为jQuery提供了一种选择HTML元素和操作DOM的简便方法. 根据W3Techs的最新统计数据 ,jQuery非常流行,&q ...
- css基础精华---Flex 布局教程:实例篇
转载地址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html http://www.ruanyifeng.com/blog/2015/0 ...
- display属性_前端基础:Grid 布局教程,重新复习grid布局的容器和项目属性
链接:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 一.概述 它将网页划分成一个个网格,可以任意组合不同的网格,做出 ...
最新文章
- Java实用教程笔记 类与对象(续)
- 修改了n次效率还是不可接受
- 力扣【接雨水问题】 leetcode-42:暴力-备忘录-双指针三种方法
- 数字信号处理基础知识00
- JqueryUI 引领Java开发新方式:专注UI,快速开发!(JqueryUI+jeecg结合, 升华的开发模式)
- 【算法】剑指 Offer 18. 删除链表的节点
- 元宵节电商促销首页设计PSD分层模板
- 给你一份详细的web前端CSS布局指南,请查收
- 老表,教你一招啊!!!如何用python实现将csv文件快速导入数据库,建议收藏!!!
- 2440: [中山市选2011]完全平方数
- 人工智能课程设计——植物识别专家系统
- 将已经汉化了的Protel 99 SE整回英文原版
- GitLab之创建项目组及项目
- 一篇文章看懂自然语言处理——word表示技术的变迁(从bool模型到BERT)
- 洛谷1260 工程规划
- CCS+JS绘制星型拓扑图(关系图)
- CorelDRAW X8官方正版序列号如何安装使用?
- 公众号原主体营业执照已注销 如何办理账号迁移和公证书?
- 云服务器安装MYSQL
- JMeter-16-循环控制器
热门文章
- Apple Developer Registration and DUNS Number Not Accepted
- 针对一直让我失望的华硕,我彻底无语
- 电脑打字时,字旁边这个闪的竖杠,特别粗解决方法Insert
- 基于FPGA的SD卡音乐播放器之WM8731篇
- java中数学的头文件_计算机编程 - 数字(Numbers)
- // this一共有4方法总结 // 第1种方法:默认绑定 // 独立调用 在区分严格模式下 严格模式下就是undefined 非严格模式下就是window 独立调用
- html表单ui图片,别人的UI表单为什么设计这么漂亮?
- 生产追溯系统-Wifi+传感器,实现计数器以及监控机器是否停止
- mysql实现二分法查找_算法之二分法查找
- FFmpeg播放视频文件流程