海外1核2G服务器低至2折,半价续费券限量免费领取!

搜搜吧

搜搜吧 门户 教程 电脑网络 查看内容

使用 CSS Grid Generator来快速使用及学习 Grid 布局

2020-3-26 15:15| 发布者: 虚拟主机评测| 查看: 10| 评论: 0

摘要: CSS Grid GeneratorCSS Grid Generator是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具,允许咱们创建一个基本的 grid 布局,然后就可以使用生成对应的代码,帮助咱们快速布局。第一次进入是界面是这 ...

CSS Grid Generator

CSS Grid Generator是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具,允许咱们创建一个基本的 grid 布局,然后就可以使用生成对应的代码,帮助咱们快速布局。

第一次进入是界面是这样子的:

使用 CSS Grid Generator来快速使用及学习 Grid 布局

CSS Grid 布局示例

当我正在学习一些东西时,我发现最好的学习方法是使用现有的工具构建实用的东西。 在本文中,咱们先从一个简单的布局开始,然后使用CSS Grid Generator创建在实际项目中使用所需的代码。

首先从一个典型的布局开始,如下所示:

使用 CSS Grid Generator来快速使用及学习 Grid 布局

接着在 CSS Grid Generator 界面的右侧更新对应的以下内容:

  • 行: 4
  • 列: 3
  • 列间距: 20
  • 行间距: 20

间距让咱们的内容之间有一定的空白。可以只使用列间距,但我想在 Header 和 Footer 之前留出一些空白,所以还同时使用行间距。

使用 CSS Grid Generator来快速使用及学习 Grid 布局

接下来,就是需要定义应用程序的不同区域。在 CSS Grid Generator 中,可以单击并拖动到需要合并地方来创建一个区域。咱们希望Footer跨越整个网格,侧边栏占用一个单元格,主内容区域跨越2列,Footer 跨越4列,最终效果,如下:

使用 CSS Grid Generator来快速使用及学习 Grid 布局

这看起来有点像咱们想要的布局,但仍然需要定义一些具体的尺寸。 在CSS Grid Generator会注意到每行和每列旁边都有一个输入框,可用于设置特定大小。

  • Header: 100px height
  • Sidebars: 200px width
  • Footer: 50px height

使用 CSS Grid Generator来快速使用及学习 Grid 布局

这看起来更像更像咱们想要的布局,但是你可能会问1fr是多少。

轨道可以用任何长度单位来定义。Grid还引入了一个额外的长度单位,以帮助各位创建灵活的Grid轨道。新的fr单元表示网格容器中可用空间的一小部分。

第二行的1fr会告诉区域占用剩余的可用空间。如果将容器设置为100vh,就会占据整个页面的内容,列也是如此。

CSS Grid Generated 生成的代码

使用 CSS Grid Generator来快速使用及学习 Grid 布局

点击“请给我示例中的代码”就可以查看对应布局生成的 CSS 代码:

使用 CSS Grid Generator来快速使用及学习 Grid 布局

创建一个simple-layout.htm并添加以下代码:

使用 CSS Grid Generator来快速使用及学习 Grid 布局

接下来添加上面生成的 CSS:

使用 CSS Grid Generator来快速使用及学习 Grid 布局

接着添加对应的标签

使用 CSS Grid Generator来快速使用及学习 Grid 布局

最后添加下面的CSS,它将为.div1 - .div5添加一些背景色:

  1. CIMAl; border: none; line-height: 21px; font-family: Arial; background: url("https://images.51cto.com/images/art1105/images/0.gif") -498px -70px repeat-y scroll transparent; color: inherit; padding: 0px 3px 0px 10px !important; margin: 0px !important; list-style-position: outside !important;">div:not(.parent) { 
  2.   padding: 10px; 
  3.   background-color: rgb(199, 199, 199); 

运行:

使用 CSS Grid Generator来快速使用及学习 Grid 布局

这看起来很好,但你希望它占据整个浏览器窗口。所以需要向.parent类添加height: 100vh:

  1. .parent { 
  2.   display: grid; 
  3.   grid-template-columns: 200px 1fr 1fr 200px; 
  4.   grid-template-rows: 100px 1fr 50px; 
  5.   grid-column-gap: 20px; 
  6.   grid-row-gap: 20px; 
  7.   height: 100vh; 

最终效果:

使用 CSS Grid Generator来快速使用及学习 Grid 布局

网格轨道(Grid Track) 加餐

两个相邻的网络线之间为网络轨道。

使用 CSS Grid Generator来快速使用及学习 Grid 布局

图中的同方向 1 和 2, 2 和 3 都是相邻的网络线,当然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相邻的网络线。

相邻的网络线为网格轨道,如下,黑色1 和 2 之间就构成了网络轨道(背景深橘色):

使用 CSS Grid Generator来快速使用及学习 Grid 布局

上面总共有 5 个网络轨道,水平方向灰色 1 和 2, 2 和 3, 3 和 4,竖直方向黑色的 1 和 2, 2 和 3,共 5 个。

网格单元(Grid Cell) 加餐

两个相邻的列网络线和两个相邻的行网络线组成的就是网络单元,如下面的深橘色背景就是网络单元。

使用 CSS Grid Generator来快速使用及学习 Grid 布局

网络单元要与网络项(项目)区别开来,网络项是 Html 中可以找的到 Dom 元素,网络单元是在定义容器的时候,它就会分割出来的一个一个单元格。

网格区域(Grid Area) 加餐

四个网络线包围的总空间。

使用 CSS Grid Generator来快速使用及学习 Grid 布局

fr单位(加餐)

剩余空间分配数,用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

搜搜吧社区温馨提示:
搜搜吧(www.sosoba.org)十分重视网络版权及其他知识产权的保护,针对网络侵权采取如下版权政策:
1、本站有理由相信网友侵犯任何人的版权或作品,(图文,文字,下载,视频,非法传播),本站有权不事先通知即删除涉嫌侵权的作品和内容
2、本站将采取必要的网络技术手段,确认为侵权作品或内容的用户有权进行警告、屏蔽、删除的行为,尽可能的防止侵权行为的发生
3、搜搜吧影视资源均收集自互联网,没有提供影片资源存储,也未参与录制上传,若本站收录的资源涉及您的版权或知识产权或其他利益,我们会立即删除
4、搜搜吧,删帖,投诉,举报,侵权,若本站侵犯您的权益,附上身份及权利证明,请直接发送邮件到 kefu-sosoba@qq.com 我们将在一个工作日内删除

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

资讯分类

推荐图文

文章排行

Powered by www.sosoba.org Copyright © 2013-2020 搜搜吧社区 小黑屋|手机版|地图|关于我们|腾讯云代金券|帮助中心|搜搜吧
广告服务/项目合作: kefu-sosoba@qq.com  侵权举报邮箱: kefu-sosoba@qq.com  搜搜吧建站时间:创建于2013年07月23日
免责声明:本站所有的内容均来自互联网以及第三方作者自由发布,版权归原作者版权所有,搜搜吧不承担任何的法律责任,若有侵权请来信告知,我们立即删除!

GMT+8, 2020-4-5 20:15 , Processed in 1.074848 second(s), 11 queries , Gzip On, MemCache On.

返回顶部