文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么学习CSS Grid布局

2024-04-02 19:55

关注

这篇文章主要介绍“怎么学习CSS Grid布局”,在日常操作中,相信很多人在怎么学习CSS Grid布局问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么学习CSS Grid布局”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

为什么只有 20%?

  For a programmer, laziness is a virture from Larry Wall

译:你懒你有理。在尽可能的情况下,一个程序员应该寻求效率(懒惰的出路)。我们日常学习也是这样,有些时候可能已经很努力但是就是没有提高。大概就是我们把80%的精力放在的那没有什么卵用的20%上了,说的好像是一步自己呢。

CSS 的 Grid 布局模块挺复杂的,比 FlexBox 布局还要复杂(学习 Flex 布局就很吃力了)。并不是因为 Grid 布局的理论困难,只是该模块引入了18个新的属性在传统的 CSS 布局理念中是前所未闻的。

额~,那么咱们是否需要立即理解掌握所有新的属性呢?NO,没有必要,而且你也记不住,就算记住了一时你也记不住一世。

只需要学习一点点就可以实现你想要的效果,然后你可以继续深入研究其他属性。

CSS Grid 布局是什么?

如果你初学 CSS,那么 Grid布局对你来说可能有一点怪异。那么你是否知道 Flexbox呢?

我喜欢把 Grid 布局看作是目前比较成熟的 Flexbox 布局的弟弟。

处理 CSS 布局通常是复杂繁琐的。Flexbox的到来给网页布局带来了新希望,即将普及的 Grid 会给我们带来更多。

目标导向

学完原文你可以实现一个响应式的音乐应用的布局。

怎么学习CSS Grid布局

Part 1: 其中的10%(1/2)----基本术语

Grid 容器

在我们曾实现过、见过的任何应用程序,从视觉呈现本质上来看,都是在一定的边界范围内将内容块进行排列,安放。

怎么学习CSS Grid布局

简单来看,一个"网格"就是多条相交的线(水平和垂直的线)规划出可以容纳其他元素的位置空间。

如果你有使用过adobe、photoshop、sketch 这类软件的话,那么你就可以很容易的理解。

在 CSS Grid 布局的语义中,Grid 容器是可以容纳网格所有子项的一个载体(Grid 世界的爸爸)。

假设你有个布局需求,如图:

怎么学习CSS Grid布局

布局是由一个网格容器和多个单元格组成。最外层且***的矩形作为整个布局的载体既网格容器;小一点的矩形为单元格。

怎么学习CSS Grid布局

网格线

图中横线和纵线,用来划分网格容器。

网格单元

网格单元是网格布局中的最小单元,它是由4条相邻的网格线围成的。

怎么学习CSS Grid布局

网格区域

网格区域最小占据一个网格单元,***可以占领整个网格容器。

下图中,四个网格单元所覆盖的区域构成一个网格区域。

怎么学习CSS Grid布局

网格轨道

我非常不喜欢学术定义。网格轨道可被视为是列或行的另一个花哨的别名。任何两个网格线之间的空间。

怎么学习CSS Grid布局

综上,我们已经学习完目标的一半了,希望你还有耐心读下去。

Part 2: 后1/2部分

已经了解了基本术语,让我们玩起来吧

声明一个网格

就像Flexbox,一切始于一行代码。display: grid或者display: inline-grid。

举例说明,让 div标签作为网格容器:

div {    display: grid;  }

声明行和列

一个网格容器如果没有行和列那还有什么意义? 创建网格容器的列和行,你要用到以下两个新的css属性grid-template-columns 和 grid-template-rows。

那么如何使用他们呢?很简单~

grid-template-columns用来声明列们,grid-template-rows用来声明行们。

你给属性传递几个值,那么相应就会划分几行或几列。例如:

grid-template-columns: 100px 200px 300px

上面的代码就会将网格容器划分为三列,列的宽度分别为100px、200px和300px

怎么学习CSS Grid布局

grid-template-rows: 100px 200px 300px

该代码会将网格容器划分为3行,行宽分别为100px 200px 300px

怎么学习CSS Grid布局

让我们将两行代码同时作用于容器,那么我们就会得到一个三行三列的网格。

grid-template-columns: 100px 200px 300px  grid-template-rows: 100px 200px 300px

Part 3: 是时候写点代码了 

为了快速的实现一个音乐 App,我们会使用 CodePen进行开发。

搭建html 结构

至于为啥写成这样,请继续读下去。

<body>     <aside></aside>     <main></main>     <footer></footer>  </body>

body 作为音乐容器

body {     display: grid;     min-height: 100%  }

上述代码已经使 body 变成了一个网格容器,继续声明行和列。

容器规划

该如何规划网格的行和列呢,让我们回顾下音乐 APP 的长相。

怎么学习CSS Grid布局

好,那么我们大概可以将布局划分为两行两列。

怎么学习CSS Grid布局

就上面的图进行构思,有几点需要注意:

关于列:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. ***列必须固定宽度50px

  3. 第2列填满剩余空间

关于行:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 第2行固定高度100px

  3. ***行自动填满剩余高度

幸运的是 Grid 布局提供了一个新的单位可以解决上述问题。fr分数单位。该单位可以解决自动分配剩余空间的问题。

如果你需要三个等宽的列,fr单位会自动均匀地分配空间。

怎么学习CSS Grid布局

如果你的业务还想添加更多的元素,也不要恐慌,fr 单位会自动完成。

怎么学习CSS Grid布局

更为巧妙的是,如果你有一个固定宽度的元素,你也可以很好的处理剩余空间。

body {     ...     grid-template-rows: 1fr 100px;     grid-template-columns: 50px 1fr; }

如果对 fr 单位还有疑问的话,请阅读the CSS Fractional Unit (Fr) In Approachable, plain Language.

使用网格区域来放置子元素

我们已经声明好了一个网格系统,现在让我们继续实现它。本小节的目的学会使用网格区域来布局子元素。请回忆一下,网格区域是由4条网格线划分出来的区域。

怎么学习CSS Grid布局

唉实在不想翻译了,直接给出代码并解释吧。划分区域要使用到另一个新的特性grid-template-areas。grid-template-areas提供了非常所见及所得的一种方式进行划分区域。

body {        ...        grid-template-areas: "sidebar  content"                             "footer   footer";  }

上述代码的意思是。。。。。

怎么学习CSS Grid布局

我们再来归纳一下所有的代码:

容器

body {        display: grid;        grid-template-columns: 40px 1fr;        grid-template-rows: 1fr 90px;        grid-template-areas: "sidebar  content"                             "footer  footer";  }

子元素

.main {    grid-area: content;  }  .footer {    grid-area: footer;  }  .aside {    grid-area: sidebar;  }

code

到此,关于“怎么学习CSS Grid布局”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯