hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

css grid规划是什么?grid规划的基础引见【html5教程】

2019-11-26HTML搜搜PHP网43°c
A+ A-
网格是规划设想的基础,而CSS Grid是一个二维规划体系,特地用于处置惩罚Web上基于网格的用户界面。经由过程Grid(网格) 规划能够处理页面上的很多规划题目。

CSS Grid规划的功用很壮大,本篇文章我们就来简朴引见一下Grid规划,让人人相识Grid规划的一些基础观点和术语,愿望对你们有所助。

Grid规划的作用:

在收集相对较短的生命周期中,开发人员一直在尝试种种要领来在浏览器中安排内容。我们一直是运用来css规划网页的, 但都存在如许或那样的题目。先是运用基于表格的规划,然后是运用基于浮动的规划。但这些要领充其量只是处理要领,因为表和浮动都不是用作真正的规划东西。

Grid(网格) 规划是第一个特地为处理规划题目而建立的 CSS 模块,我们终究不须要想尽办法来处理页面规划款式了。

CSS Grid引入了一系列属性,许可我们运用CSS建立网格构造并掌握网格项的安排和大小调解。这意味着我们能够运用媒体查询来调解我们的网格规划来顺应差别大小的显现屏。

Grid还带有壮大的自动安排算法,能够更轻松地添补可用空间,而无需举行大批庞杂的盘算。在某种程度上,Grid以至许可在z轴上具有肯定的天真性,因为假如须要,您能够堆叠网格项。

css Grid的基础观点和术语

因为Grid的建立异常天真,并为很多差别的用例供应处理方案,因而我们没法疾速就可以明白和运用它。下面我们先来看看Grid的一些基础观点和术语。

在网格范例中引入了术语和观点,因而我们想要充分应用网格,首先要相识并明白这些术语和观点。

网格线

网格线是构成网格构造基础的水平线和垂直线。它们用于在网格上定位项目。我们能够用数字索引来援用它们,从1最先。

网格线也有负指数,这许可我们从网格的末端最先援用网格线。负索引的一个用例是,假如我们须要末了一列中的项目,而不斟酌轨道的数目,那末为该项目供应一个值为-1的grid-column-end属性将会处置惩罚它。

.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
}

.item {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}

我们能够定名网格线,如许就没必要盘算须要援用的网格线。能够在网格模板列和网格模板行属性中将这些称号声明为可选参数。

.grid-container {
  display: grid;
  grid-template-columns: 150px [col-foo] 150px 150px [col-bar];
  grid-template-rows: 150px [row-foo] 150px [row-bar];
}

.item {
  grid-column-start: col-foo;
  grid-column-end: col-bar;
  grid-row-start: row-foo;
  grid-row-end: row-bar;
}

网格轨道和单位格

网格轨道是2个相邻网格线之间的空间,它们是网格的行和列。下图凸起显现了第一行和第二行网格线之间的网格轨迹。我们能够运用grid-row-gap和grid-column-gap属性,应用行间隙和列间隙来把网格轨道离开。

网格单位是2个相邻行网格线和2个相邻列网格线之间的空间。它在观点上类似于表格单位格,因为它是网格的单个单位。下图凸起显现了第三和第四列网格线以及第二和第三行网格线之间的网格单位。

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
}

网格地区

网格地区由1个或多个网格单位构成,并由网格地区的每一侧上的4个网格线束缚。您能够运用其grid-template-areas属性定义的边境网格线或其称号来援用网格地区。然后能够将网格项目分配给具有网格规划属性的网格地区,比方:grid-area,grid-row,grid-column属性或它们的长花样的等价物。

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px 150px; /* three columns  */
  grid-template-rows: 150px 150px; /* two rows  */
  grid-template-areas: "a b b"
                       "a b b";
}

.item-1 {
  grid-area: a;
}

.item-2 {
  grid-area: b;
}

如前所述,图表的暗影部份是网格轨道之间的沟槽,能够运用grid-row-gap和grid-column-gap属性掌握。

所以,把它们放在一同:

总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。

以上就是css grid规划是什么?grid规划的基础引见的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
css grid规划是什么?grid规划的基础引见【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: