级联样式表(CSS)网格布局是CSS中最重要,功能最强大的布局系统。 它建在二维内部
系统,这意味着它可以处理列和行。 您可以建立一个
通过将CSS规则应用于grid元素和
父元素。
CSS网格布局( <grid>
)是基于二维网格的布局
该系统旨在改变我们格式化基于网格的用户的方式
界面(UI)。 CSS帮助Web开发人员在整个环境中创建统一的外观
网站的几页。 而不是定义每个样式
表格和HTML文件中的每个文本块。 但是大多数网络
开发人员将同意它做得不好。 第一,
开发人员尝试使用表格,然后进行浮动,定位和
内联代码块,但所有这些方法本质上都是黑客和
遗漏了许多重要的功能。
网格是专门为解决布局问题而创建的第一个CSS模块,自我们创建网站以来,我们一直在探索自己的方式。
要了解有关其功能的更多信息,请查看上图(基本网格系统)
如您所见,网格是一个简单的元素块,可让您
将其中包含的任何元素放置在特定区域内
由于具有二维特性,因此具有特定的尺寸
首先,我们需要了解一些基本术语
更好地了解什么是网格。
网格容器
网格容器是所有网格项目的直接父级。 和我们
将在我们的代码中使用“显示样式元素”来调用它
然后将添加Grid属性。
<!DOCTYPE html>
< html >
< head >
< style >
.container {
display : grid;
}
</ style >
</ head >
< body >
< h1 > Grid Layout </ h1 >
< p > This grid layout contains four grid items </ p >
< div class = ".container" >
< div class = "item1" > </ div >
< div class = "item2" > </ div >
< div class = "item3" > </ div >
< div class = "item4" > </ div >
</ div >
</ body >
</ html >
网格项
网格项是网格容器的直接后代。 的
网格项中的元素不是。 为了演示,
下图中项目的元素是网格项目,但是
子项目不是。
<!DOCTYPE html>
< html >
< head >
< style >
.container {
display : grid;
}
</ style >
</ head >
< body >
< h1 > Grid Layout </ h1 >
< p > This grid layout contains two grid items </ p >
< div class = ".container" >
< div class = "item1" >
< h2 class = "sub-item" > </ h2 >
< p class = "sub-item" > </ p >
</ div >
< div class = "item2" >
< img class = "sub-item" > </ img >
< div class = "sub-item" > </ div >
</ div >
</ div >
</ body >
</ html >
网格线
网格线是负责绘制2D网格的线。 他们可以
可以是垂直或水平。 垂直的确能形成一条线
给我们每一列的比例,水平列使
为我们显示行线的线。
在下面的示例中,您将能够更好地理解
什么是网格线,将以黄色上色。 这个
线代表为我们绘制包含四列的网格的5条线之一。
网格轨迹
我认为,考虑它们的最佳方法就像是一行或一列
组成网格。 基本上,它们是两条相邻的网格线之间的空间。 在下面,您将能够看到第一列和第二列网格线之间的网格轨迹。
网格单元
顾名思义,它只是一块网格,并且是
行和列重叠的空间。 在此示例中,您将
能够在第一列和第三行之间的结合处将其可视化。
网格单元也可以称为网格区域。 但这不是最佳做法。 在下一节中,您将了解原因。
网格面积
网格区域是两条相邻的水平线和两条相邻的垂直线重叠的空间,一个网格区域可以由任意数量的网格单元组成。
在下面的示例中,您将看到网格区域由网格行线2和4与网格列线3和5的交点组成。
希望您喜欢这篇文章,它很适合您的需求并回答一些问题。
和我一起在下一篇文章:网格元素的最佳实践
创建人:Daniel Laloush
From: https://hackernoon.com/learning-css-grid-layout-basic-concepts-with-example-y79w36tk