7个教程和工具让你开始使用CSS网格。

自从CSS Grid的出现它就变得很受欢迎,它甚至被我们行业最新的官方流行语所引用。谈论着它是未来的网页设计和布局。我可以滔滔不绝地说,当狂热发生的时候,没有使用网格的人会被抛在后面,维基百科的互联网先驱名单上的每一个人都会回来带我们去参加天空中的伟大的局域网聚会。

我的观点是,如果你一直在关注——如果你正在阅读这篇文章,你可能会关注——那么你就已经知道了。但是,让我们假设您已经听说了很多关于CSS Grid的好东西,但是还没有机会使用它。你从哪里开始呢?

教程

您的第一步将是熟悉CSS Grid的基本原理。我们有很多博客文章和视频教程。我想说的是,当你有时间的时候,让我看看这里的一切,因为它们都提供了不同的视角,可以帮助你更好地理解CSS Grid。

网格的例子

Grid by Example是一个专门用于CSS Grid的网站,它是一个更完整的资源。他们有教程。他们的例子。他们有现成的Html模板,视频教程,还有比我们这里更多的资源链接。

这个网站碰巧是由Rachel Andrew创建的,她是CSS工作组的顾问,现在已经推广CSS Grid有一段时间了。所以她知道自己的事。

布局的土地

Layout Land是YouTube上的一个频道,主要关注——你可能已经猜到了——布局。这些视频由珍·西蒙斯(Jen Simmons)创建和主持,她创造了"固有的网页设计"(参见本文中链接的第一件事),主要关注CSS Grid,以及其他一些非常有用的信息。

CSS网格

CSS网格是一个免费的25视频课程。这些视频是由传奇的韦斯·博斯(Wes Bos)制作的,他为网络开发者制作了相当多的视频课程。本课程提供了入门文件,完成了每个问题的解决方案。

css技巧

对于那些没有时间上视频课程的人来说,我们有一些不错的老式博客文章。而且他们是我们在CSS-Tricks的好朋友!(嗯,他们是我的朋友,但他们还不知道。)

对于快速而肮脏的介绍,您将希望阅读Robin Rendle的CSS Grid。

要获得一个包含示例的更完整的指南、所有您可能需要的代码选项、术语介绍,以及更多内容,您应该查看关于Grid的完整指南。

工具

好吧,你知道基本的知识。现在我们有一些工具可以让你的生活变得更简单只要你把CSS网格放在一起:

浏览器的工具

无论你是像我一样在浏览器中设计网站,还是仅仅需要在草图中实现别人的设计,它都会帮助你看清你在做什么。当谈到CSS网格时,这并不是最简单的事情。当然,您可以收集一些示例内容并开始布局,或者您可以使用基于浏览器的网格检查器。

火狐量子:开发者版有一个,还有很多额外的好处。实际上,如果您在浏览器中进行设计,这可能是最好的浏览器之一。

7个教程和工具让你开始使用CSS网格(图1)

到目前为止,Chrome拥有Gridman - CSS网格检查器扩展。现在,它是第三方的延伸,包含了所有的风险。当你用鼠标悬停在网格上时,它也只能"显示"网格。希望这能尽快得到解决。

CSS网格生成器

当你已经在浏览器中工作的时候,这些都很好,但是如果你想在CSS中构建一个自定义网格,粘贴到你的文件中,然后呢?进入CoffeeCup CSS网格构建器。这是一个针对Windows和Mac桌面的免费应用程序,可以让您快速、轻松地设计CSS布局,然后将其导入其他项目。

你可以设置网格、浮动布局等等,所有这些都是在视觉界面中设计的,可以帮助你完成很多基本的布局工作。现在,你必须提供一些个人数据(姓名/电子邮件)来下载这个应用程序,否则它是免费的。

7个教程和工具让你开始使用CSS网格(图2)

由IBM GRIDISH

现在,CSS Grid拥有出色的现代浏览器支持,但并不是非常好的遗留浏览器支持。如果你也想支持旧浏览器,你会怎么做?你可以试试Gridish,它是一个节点。IBM创建的js项目。

基本上,你输入你的网格的规格,你得到两件事:

为您的设计团队自动生成带有画板和布局文件的草图文件。

SASS/CSS代码为您的网格,有一个内置在Flexbox的后备网格,它目前有更好的浏览器支持。

他们还提供了一个Chrome扩展,专门用于检查用这个工具构建的CSS网格。您可以在上面的官方链接上阅读关于该项目的所有内容,或者直接访问GitHub repo。

7个教程和工具让你开始使用CSS网格(图3)

就这些了,真的。CSS Grid仍然是一种相当"新"的技术,因此尽管有大量的资源,但目前它们大多覆盖相同的领域。但随着时间的推移,我怀疑我们会看到更多。

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/216795.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2023年2月14日 01:33
下一篇 2023年2月14日 01:33

相关推荐

  • 网站建设中的meta简介。

    meta简介 网页元数据,常用于定义网页的编码、说明、关键字、修改日期及其他信息。这些数据服务于浏览器、搜索引擎等。 meta 标签的2个属性name, http-equiv。 name 属性 http-equiv 属性 http-equiv 模拟 http ...

    2022年7月4日
    0150
  • HTML5前端的7个框架。

    随着互联网行业的快速发展,越来越多的年轻人选择互联网行业就业。HTML5是一个简单易上手非常实用的技能,专攻于HTML的开发人员的薪资也非常的不错。想要学习HTML的朋友,推吧推吧在这里分享7个常用的框架给大家...

    2022年7月4日
    0338
  • 学习前端技术栈ServiceWorker,让你的网页变快20%。

    有些人会认为,前端不就是切图然后展示么,有什么技术含量,学前端不如学习Php,此言差矣,这些年随着互联网的发展,前端技术变得越来越重要,生态圈也越来越发达,今天我们来介绍一个前端技术栈,ServiceWorker...

    2022年7月4日 建站资讯
    0136
  • 学会DIV+CSS布局是否有利于找工作?

    学习了CSS布局,不会程序开发依然可以建设属于自己网站,买卖产品、装修装修淘宝均可。 可以找到什么工作呢? 1、后台开发程序员: 很多网络公司都要求程序员会CSS、熟悉CSS甚至精通CSS技术; 2、网页美工设计师...

    2015年12月1日
    0223
  • 前端设计中应该了解的web登录。

    当时做登录这块的时候,被session、cookie、token各种概念差点整蒙圈了,上网查询相关概念,发现很多人都是类似的疑惑,比如: 来了字节跳动之后,前端很少接触HTTP请求之后的事情,而且登录相关的SDK封装的很好...

    2022年7月4日 建站资讯
    0131
  • 第六章——css部分:基本属性与CSS

    一、标签属性与样式 1、网页内容根据想要在作用选择对应在标签 2、找到对应在标签,敲空格看提示,选择对应在单词(或style)来描述该标签。 直接能够敲的出来我们成为属性(attribute),类似于字体在color等。 ...

    2017年5月22日
    0422
  • css+div布局学习路线!

    自学CSS+DIV布局步骤 一、认清目的 首先要认识为什么要学习CSS,知道学习CSS目的是什么。 认识学习目的才能坚持持之以恒、认识学习目的才有目的性从中得到乐趣和享受! 二、基础学习 1、了解CSS作用是什么? 2、c...

    2017年11月7日
    0208
  • css+div布局学习步骤?

    认清目的 首先要认识为什么要学习CSS,知道学习CSS目的是什么。 认识学习目的才能坚持持之以恒、认识学习目的才有目的性从中得到乐趣和享受! 基础学习 1、了解CSS作用是什么? 2、css基础知识 3、了解常用css属...

    2017年12月19日
    0409

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息