5.6 KiB
5.6 KiB
title | localeTitle |
---|---|
Grid Layout | 网格布局 |
网格布局
CSS Grid Layout,简称为Grid,是一种CSS中最新,最强大的布局方案。它受到所有主流浏览器的支持,并提供了一种在页面上定位项目并移动它们的方法。
它可以自动将项目分配给_区域_ ,大小和调整大小,根据您定义的模式创建列和行,并使用新引入的fr
单元进行所有计算。
为何选择Grid?
- 您可以轻松拥有一个带有一行CSS的12列网格。
grid-template-columns: repeat(12, 1fr)
- Grid允许您向任何方向移动物体。与Flex不同,您可以在其中水平(
flex-direction: row
)或垂直(flex-direction: column
)移动项目 - 不能同时移动两者,Grid允许您将任何_网格项目_移动到页面上的任何预定义_网格区域_ 。您移动的物品不必相邻。 - 使用CSS Grid,您可以仅使用CSS更改HTML元素的顺序 。从顶部向右移动某些内容,将页脚中的元素移动到侧边栏等。而不是在HTML中将
<div>
从<footer>
到<aside>
,而只需在grid-area
中更改它的位置即可。 CSS样式表。
网格与Flex
- Flex是一维的 - 水平或垂直,而Grid是二维的,这意味着您可以在水平和垂直平面中移动元素
- 在Grid中,我们将布局样式应用于父容器而不是项目。另一方面,Flex以flex项为目标来设置
flex-basis
,flex-grow
和flex-shrink
等属性 - Grid和Flex不是互斥的。您可以在同一个项目中使用它们。
使用@supports
检查浏览器兼容性
理想情况下,在构建站点时,您可以使用Grid进行设计,并使用Flex作为后备。您可以通过@support
CSS规则(也就是要素查询)查看您的浏览器是否支持网格。这是一个例子:
.container {
display: grid; /* display grid by default */
}
@supports not (display: grid) { /* if grid is not supported by the browser */
.container {
display: flex; /* display flex instead of grid */
}
}
入门
要使任何元素成为网格,您需要将其display
属性分配给grid
,如下所示:
.conatiner {
display: grid;
}
就是这样。你刚刚把你的.container
了一个网格。 .container
每个元素.container
自动成为网格项。
定义模板
行和列
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;
地区
grid-template-areas:
"aaaa"
"bcde"
"bcde"
"ffff";
要么
grid-template-areas:
"header header header header"
"nav main main sidebar";
网格区域
这里有一些关于如何定义和分配网格区域的示例代码
.site {
display: grid;
grid-template-areas: /* applied to grid container */
"head head" /* you're assigning cells to areas by giving the cells an area name */
"nav main" /* how many values kind of depends on how many cells you have in the grid */
"nav foot";
}
.site > header {
grid-area: head;
}
.site > nav {
grid-area: nav;
}
.site > main {
grid-area: main;
}
.site > footer {
grid-area: foot;
}
fr
单位
Grid引入了一个新的fr
单元,代表_分数_ 。使用fr
单元的好处在于它可以为您完成计算。使用fr
可以避免边距和填充问题。使用%
和em
等,它在计算grid-gap
时成为数学方程式。如果你使用了fr
单位,它会自动计算柱子和装订线尺寸,并相应地调整柱子的大小,加上最后也没有出血间隙。
例子
根据屏幕大小更改元素的顺序
假设你想要在小屏幕上将页脚移动到底部,在大屏幕上向右移动,并且在两者之间还有一堆其他HTML元素。
简单的解决方案是根据屏幕大小更改grid-template-areas
。您也可以根据屏幕大小更改列数和行数 。这是Bootstrap网格系统( col-xs-8 col-sm-6 col-md-4 col-lg-3
)的一种更简洁,更简单的替代方案。
.site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"main header"
"main sidebar"
}
@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
.site {
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer"
}
}
请参阅CodePen上的Aamnah Akram( @aamnah ) 的示例 - Pen CSS Grid - 2(网格区域+网格间隙) 。
更多信息:
- Mozilla的CSS Grid Palyground如果您是CSS Grids的新手,那么这是一个很好的起点。它具有视觉效果,可帮助您轻松理解术语
- YouTube:Morten Rand-Hendriksen:CSS Grid改变了一切(关于Web布局)这个演示文稿将在不到一个小时的时间内为您提供CSS Grids为什么很酷以及为什么/如何使用它们
- 视频:学习网格布局视频系列由Rachel Andrew Rachel Andrew被认为是该主题的专家。视频标题可能看起来很陌生而且势不可挡,但内容很短且非常重要
- 书:Rachel Andrew为CSS网格布局做好准备