关键词:
网格布局的基础知识 | CSS Grid Layout: Basic Concepts of Grid Layout (Grid Layout) - CSS 中文开发手册
CSS网格布局将二维网格系统引入到CSS中.。网格可用于布局主要页面区域或小用户界面元素。本文介绍了CSSGrid布局和CSSGrid布局级别1规范中的新术语。然后,本指南的其余部分将更详细地解释本概览中显示的功能。
什么是网格?
网格是一组横线和垂直线的交集--一组定义列,另一组定义其他行。元素可以放在网格上,尊重这些列和行。CSS网格布局具有以下特性:
固定和灵活的轨道尺寸
您可以创建一个具有固定轨道大小的网格,例如使用像素。您还可以使用灵活的大小和百分比创建网格,也可以使用新的fr为此目的而设计的单位。
项目放置
您可以使用行号、名称或以网格的某个区域为目标,将项目放置到网格上的精确位置。网格还包含一种算法,用于控制未在网格上明确位置的项的位置。
创建保存内容的附加音轨
您可以使用网格布局定义显式网格,但该规范还处理在声明网格之外添加的内容,根据需要添加额外的行和列。它还包括了一些特性,比如添加“尽可能多的列放入容器中”。
对准控制
网格包含对齐功能,以便我们可以控制项目在放置到网格区域后如何对齐,以及整个网格是如何对齐的。
重叠内容的控制
可以将多个项放置到网格单元中,或者区域可以部分重叠。然后,可以用z-index...
网格是一个强大的规范,当它与css的其他部分结合时,例如挠曲箱,可以帮助您创建以前无法在CSS中构建的布局。所有这些都是从在您的网格容器...
网格容器
我们创建一个网格容器宣布display: grid或display: inline-grid在一个元素上。我们一做完这一切直接儿童会变成网格项...
在这个例子中,我有一个包含一个包含一个包装器类的div,里面有五个子元素。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
我做.wrapper网格容器。
.wrapper { display: grid; }
所有直接子级现在都是网格项。在Web浏览器中,在将项目转换为网格之前,您将不会看到这些项的显示方式有什么不同,因为网格已经为这些项创建了单个列网格。此时,您可能会发现在Firefox Developer Edition中工作是有用的,它具有网格检查员可作为开发人员工具的一部分提供。如果您在Firefox中查看此示例并检查网格,您将看到该值旁边有一个小图标。grid单击此按钮,此元素上的网格将覆盖在浏览器窗口中。
当您学习并使用CSSGrid布局时,这个工具将使您更好地了解网格在视觉上发生的情况。
如果我们想要让这个更多的网格-就像我们需要添加列轨道。
网格轨道
属性定义网格上的行和列。grid-template-columns和grid-template-rows财产。这些定义了网格轨迹。阿栅极轨道网格上任意两行之间的空间。在下面的图像中,您可以看到一个轨道荧光笔-我们的网格中的第一行轨道。
我可以通过添加grid-template-columns属性,然后定义列跟踪的大小。
我现在已经创建了一个网格,有三个200像素宽的列轨道。子项将在此网格上部署,每个网格单元格中的一个。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper { display: grid; grid-template-columns: 200px 200px 200px; }
fr股
音轨可以使用任何长度单位来定义。网格还引入了一个额外的长度单位,以帮助我们创建灵活的网格轨道。新fr单元表示网格容器中可用空间的一小部分。下一个网格定义将创建三个相同宽度的轨道,根据可用空间的大小增长和缩小。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
在下一个示例中,我们使用2fr第二轨道1fr脚印。可用空间分为四个。第一首曲目有两部分,第二部分各有一部分。
.wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; }
在最后一个例子中,我们将绝对尺寸的轨道和分数单位混合在一起。第一个音轨是500像素,所以这个固定的宽度被从可用的空间中删除。剩下的空间被分成三个,并按两个灵活轨道的比例分配。
.wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; }
跟踪列表repeat()表示法
有许多轨道的大型网格可以使用repeat()符号,以重复全部或部分的轨道列表。例如,网格定义:
.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
也可以写成:
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); }
重复表示法可用于轨道列表的一部分。在下一个示例中,我创建了一个初始20像素跟踪的网格,然后创建了一个6的重复部分。1fr跟踪然后最后20像素的轨道。
.wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; }
重复表示法采用一个曲目列表,因此您可以使用它来创建一个重复的曲目模式。在下一个例子中,我的网格将由10条轨道组成,1fr后面跟着一个2fr追踪,重复了五次。
.wrapper { display: grid; grid-template-columns: repeat(5, 1fr 2fr); }
隐式和显式网格
在创建示例网格时,我们使用grid-template-columns属性,但允许网格根据需要为内容创建行。这些行是在隐式网格中创建的。显式网格由您使用的行和列组成。grid-template-columns和grid-template-rows如果您将某些内容放置在该定义网格之外,或者由于需要更多网格跟踪的内容,则网格将在隐式网格中创建行和列。默认情况下,这些曲目将是自动大小的,基于它们内部内容的大小也是如此。
还可以为隐式网格中创建的轨道定义一个设置大小。grid-auto-rows和grid-auto-columns财产。
在下面的示例中,我们使用grid-auto-rows以确保在隐式网格中创建的轨道高为200像素。
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
径迹调整和minmax()
在设置显式网格或为自动创建的行或列定义大小大小时,我们可能希望为轨道提供最小的大小,但确保它们展开以适应添加的任何内容。例如,我可能希望我的行不会折叠小于100像素,但是如果我的内容延伸到300像素,我希望行延伸到那个高度。
网格有一个解决方案。minmax()功能。在下面的示例中,我将使用minmax()在…的价值上grid-auto-rows自动创建的行将至少有100像素高,最高为auto.使用auto意味着大小将查看内容大小,因此可以拉伸,以便为这一行中单元格中最高的东西提供空间。
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); }
<div class="wrapper"> <div>One</div> <div>Two <p>I have some more content in.</p> <p>This makes me taller than 100 pixels.</p> </div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
网格线
应该注意的是,当我们定义网格时,我们定义的是网格轨道,而不是线条。网格然后给我们编号行,以使用时,定位项目。在我们的三列,两行网格中,我们有四列行行。
根据文档的书写方式对行进行编号。在从左到右的语言中,第1行位于网格的左侧.。在一种从右到左的语言中,它位于网格的右边.。行也可以命名,我们将在本系列后面的指南中介绍如何做到这一点。
项目对线定位
我们将在后面的文章中详细探讨基于行的布局。下面的示例演示如何以简单的方式完成此操作。当放置一个项目时,我们的目标是路线-而不是轨道。
在下面的示例中,我使用grid-column-start,,,grid-column-end,,,grid-row-start和grid-row-end财产。从左到右工作,第一项放在第1列的旁边,并跨越到第4列,在我们的例子中,第4行是网格上最右边的行。它从第1行开始,最后在第3行结束,因此跨越两行轨道。
第二项从网格列第1行开始,跨越一个轨道。这是默认的,所以我不需要指定结束行。它还跨越从第3行到第5行的两行轨道。其他项目将放置在网格上的空空间中。
<div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> </div>
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; }
不要忘记可以使用网格检查员在Firefox开发工具中,查看项目如何与网格线相对应。
网格单元
阿栅极单元是网格上最小的单位。从概念上讲,它就像一个表格单元格。正如我们在前面的示例中所看到的,一旦在父节点上定义了网格,子项就会在定义的网格的每个单元格中放置一个。在下面的图片中,我突出显示了网格的第一个单元格。
网格区域
项可以按行或按列跨一个或多个单元格,这将创建网格面积网格区域必须是矩形的,例如,不可能创建一个L形区域。突出显示的网格区域跨越两行和两列轨道。
排水沟
排水沟或小巷在网格单元格之间创建网格单元格时,可以使用grid-column-gap和grid-row-gap属性,或速记grid-gap在下面的示例中,我在列和1em行间的空隙。
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 1em; }
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div>
空隙所使用的任何空间,在空间分配到灵活长度之前,都会被考虑进去。fr轨道,和差距的作用,大小的目的,就像一个常规的网格轨道,但你不能把任何东西到一个缺口。就线路定位而言,差距就像一条粗线.
嵌套网格
网格项可以成为网格容器。在下面的示例中,我在前面创建了三列网格,其中有两个定位项。在这种情况下,第一个项目有一些子项。由于这些项目不是网格的直接子项目,因此它们不参与网格布局,因此在正常的文档流中显示。
<div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> <div class="nested">c</div> ? </div> <div class="box box2">Two</div> <div class="box box3">Three</div> <div class="box box4">Four</div> <div class="box box5">Five</div> </div>
如果我box1到display: grid我可以给它一个轨道的定义,它也将成为一个网格。然后在这个新的网格上放置项目。
.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-columns: repeat(3, 1fr); }
在这种情况下,嵌套网格与父网格没有关系。如您在示例中所看到的,它没有继承grid-gap父网格和嵌套网格中的行不对齐父网格中的行。
亚网格
在第1级网格规范中,有一个名为亚网格这将允许我们创建使用父网格的跟踪定义的嵌套网格。
子网格尚未在任何浏览器中实现,规范可能会更改。
在当前规范中,我们将编辑上述嵌套网格示例,以使用display: subgrid而不是display: grid,然后删除轨道定义。嵌套网格将使用父网格轨道来布局项目。
应该注意的是,嵌套网格是在两个维度-行和列。不存在隐式网格与子网格协同工作的概念。这意味着您需要确保父网格为所有子项提供足够的行和列跟踪。
.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; display: subgrid; }
分层项目z-index
网格项可以占用相同的单元格。如果我们返回到我们的例子中,项目按行号定位,我们可以将其更改为使两个项重叠。
<div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> <div class="box box4">Four</div> <div class="box box5">Five</div> </div>
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; }
项目box2现在是重叠的box1,它将显示在顶部,因为它稍后会以源顺序出现。
控制命令
我们可以通过使用z-index属性--与定位项一样。如果我们给box2较低的z-index比box1它将显示在下面box1堆里。
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; z-index: 2; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; z-index: 1; }
下一步
在本文中,我们通过Grid Layout Specification快速浏览了一下。试一下代码示例,然后转到本指南的下一部分,我们将开始深入了解CSS网格布局的细节。
??CSS 中文开发手册display:grid网格布局的基础使用(代码片段)
css新特性——网格布局 我们通过在元素上声明 display:grid 来创建一个网格容器。一旦我们这样做,这个元素的所有直系子元素将成为网格元素。 它将元素分割成行与列,通过栅格栏的形式弥补了fle... 查看详情
网格布局之相关特性(代码片段)
通过前面的知识,我们了解了关于网格布局的基本知识,但是在实际运用中,网格布局还有其特有的运用点,本文主要是探讨网格布局相关的独立源、网格分层和网格流动。独立源在web页面中,HTML结构是按照一种类似于树形结... 查看详情
网格(grid)(代码片段)
网格CSS网格是一个用于web的二维布局系统。利用网格,你可以把内容按照行与列的格式进行排版。另外,网格还能非常轻松地实现一些复杂的布局。关于使用网格进行页面排版,这篇文章包含了你需要的一切知识。什么是网格布... 查看详情
知识归纳-网格布局-grid
...:垂直对齐方式水平对齐方式 [space-evenly:网格与网格间、网格与边框间的间距相等,对标space-around]水平对齐方式:justify-items:start|end|strech;垂直对齐方式: 查看详情
网格编程基础--01
...链接:https://catlikecoding.com/unity/tutorials/procedural-grid/)创建网格点使用协程分析网格点的布局定义三角面自动生成法线添加纹理坐标和切线 本篇教程学习简单的顶点和三角形网格的创建 需要具备的基础:熟悉基本的Unity编... 查看详情
初识grid布局(代码片段)
...bsp; Grid布局是网站设计的基础,CSSGrid是创建网格布局最强大和最简单的工具。 CSSGrid布局由两个核心组成部分是wrapper(父元素)和items(子元素)。wrapper是实际的grid(网格),items是grid(网格)内... 查看详情
css网格布局(grid)教程
一、概述CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。首先来介绍几个概念:想象一个三行三列的布局,网格线就是构成网格所有的线条,三行三列的布局每行就会有4条网格线。网格... 查看详情
微搭低代码从入门到精通12-网格布局
...了门槛。最近更新的版本中新推出了一个布局组件,网格布局。使用起来就比较方便,本篇我们介绍一下网格布局的用法。01案例效果02布局拆解一般我们看到一个布局就先要进行拆解,网格布局是用行和列来进行拆... 查看详情
微搭低代码从入门到精通12-网格布局
...了门槛。最近更新的版本中新推出了一个布局组件,网格布局。使用起来就比较方便,本篇我们介绍一下网格布局的用法。01案例效果02布局拆解一般我们看到一个布局就先要进行拆解,网格布局是用行和列来进行拆... 查看详情
cssgrid网格布局
CSSGrid网格布局一、概括1.1功能将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。1.2和flex的区别Flex布局是轴线布局,只能指定"项目"针对轴线的位置。Grid布局则是将容器划分成"行"和"... 查看详情
打开masablazor的正确姿势4.3:grid网格布局
Grid网格布局,借鉴了Bootstrap,以Flex弹性布局为基础,使用组件方式,让我们以更加简单直接的行列方式,进行灵活布局,是MASABlazor中更加推荐的布局方式。如果已经熟悉了Flex弹性布局,上手Grid也会很快。一、Grid网格布局的相... 查看详情
collectionview网格布局
...结点经验!本篇文章是在练习如何使用UICollectionView进行网格布局。网格布局是非常常见的UI布局,在很多的App中都这么设计过。本篇文章只讲如何实现风格布局,demo中有一些是优化 查看详情
为啥我的网格布局没有占据完整的宽度
】为啥我的网格布局没有占据完整的宽度【英文标题】:Whymygridlayoutisnotoccupyingcompletewidth为什么我的网格布局没有占据完整的宽度【发布时间】:2018-10-2817:20:07【问题描述】:我有一个包含六行的网格(每行是一个堆栈布局)。... 查看详情
浅谈gfc
...(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等,在众多布局方法中,大家最为熟悉的就是浮动布局和网格布局,并且使用不同的细节能得到不同的布局效果。虽然这些布局能让大家实现常见的... 查看详情
安卓7大基本布局
一:基础知识1.Android七大基本布局分别是:LinearLayout(线性布局)、TableLayout(表格布局)、RelativeLayout(相对布局)、FrameLayout(层布局)、AbsoluteLayout(绝对布局)、GridLayout(网格布局)、ConstraintLayout(约束布局)。2.七大基本布局的继承... 查看详情
javaawt图形界面编程layoutmanager布局管理器④(gridlayout网格布局|gridbaglayout网格包布局)(代码片段)
文章目录一、GridLayout网格布局二、GridLayout构造函数三、GridLayout网格布局代码示例四、GridBagLayout网格包布局一、GridLayout网格布局GridLayout网格布局管理器可以将当前的Container容器划分成网格,每个网格区域相同;向使用了GridLayout网... 查看详情
javaawt图形界面编程layoutmanager布局管理器④(gridlayout网格布局|gridbaglayout网格包布局)(代码片段)
文章目录一、GridLayout网格布局二、GridLayout构造函数三、GridLayout网格布局代码示例四、GridBagLayout网格包布局一、GridLayout网格布局GridLayout网格布局管理器可以将当前的Container容器划分成网格,每个网格区域相同;向使用了GridLayout网... 查看详情
Tkinter 网格动态布局
】Tkinter网格动态布局【英文标题】:TkinterGridDynamicLayout【发布时间】:2018-05-2203:09:21【问题描述】:我想创建一个网格布局,用一个填充第一行的网格,直到它用完窗口中的空间,并将项目动态移动到下面的行(如文本换行)... 查看详情