图解CSS: Grid布局(Part9)

前面花了很多篇幅和大家一起探讨了 CSS 网格布局系统中的一些重要概念,并且深入探讨了运用于网格容器上属性的知识和使用。不过我们只围绕着 grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-ato-flow 展开,对于子网格、瀑布流以及对齐等相关的话题并未展开,留到后面再做探讨。在学习运用于网格容器上属性的时候,在相关的示例中用到了用于网格项目的属性,比如grid-rowgrid-columngrid-area等,并且还多次提到网格项目放置这个概念。或许你对它们的使用有了一个基本的了解,但要彻底掌握他们,我们还是很有必要花更多的时间来学习和探讨。

图解CSS: Grid布局(Part8)

在 CSS 网格系统中,网格线是一个非常重要的概念。默认情况之下,只要定义了一个网格系统,就会默认创建以数字为索引号的网格线名称(行网格线名称和列网格线名称)。除此之外,还要以在 grid-template-columnsgrid-template-rows 中显式的在中括号[]中给网格线指定名称。通过前面章节的学习,CSS 网格系统中有显式网格和隐式网格之分,同样的,网格线也有显式网格线和隐式网格线之分,位于显式网格上的网格线被称为显式网格线,位于隐式网格上的网格线被称为隐式网格线。而且在网格系统中,明确放置网格项目时离不开网格线,换句话说,网格线命名的好不好直接会影响我们网格项目放置。在这篇文章中将主要和大家探讨网格线怎么命名?感兴趣的请继续往下阅读。

图解CSS: Grid布局(Part7)

Part6 和大家一起探讨了在网格布局中怎么使用 grid-auto-columnsgrid-auto-rows 以及 grid-rowgrid-columngrid-area 创建隐式网格。在使用 grid-rowgrid-columngrid-area 放置网格项目的时候,有可能会造成网格缺口出现。在网格布局中,我们可以使用 grid-auto-flow 属性让网格项目更好的被放置到网格单元格上。这篇文章主要和大家探讨了网格项目自动放置属性 grid-auto-flow 的基本语法和自动放置规则等特性,感兴趣的继续往下阅读。

2021年你可能不知道的 CSS 特性

记得去年整理一篇也是关于 CSS 新特性方面的内容,即《2020年CSS有哪些新特性》。这回在 T(X) Team.午夜识堂 也和大家一起聊了一些 CSS 新特性方面的话题,主要是帮助团队同学能拓展一下 CSS 方面的新知识。虽然聊的是“新特性”,但其中有些特性并不怎么“新”,或许已在你的项目中,或许已接触过,只是不太了解而以。接下来,就和大家一起来简单地回顾一下这些特性,希望大家能喜欢,也希望对大家平时工作有所帮助。

图解CSS: Grid布局(Part6)

CSS 网格布局中有 显式网格隐式网格 之分,在 CSS 网格布局中可以使用 grid-template-columnsgrid-template-rowsgrid-template-areas 可以定义显式网格,并且可以定义显式网格固定的网格轨道数量,同时 grid-template-columnsgrid-template-rows 可以用来显式指定网格轨道尺寸。而在 CSS 网格布局中,可以在网格容器上使用 grid-auto-columnsgrid-auto-rowsgrid-auto-flow 可以显式定义隐式网格,并且 grid-auto-columnsgrid-auto-rows 可以用来指定隐式网格轨道的尺寸。那么在这篇文章中,主要和大家一起探讨在 CSS 网格布局中如何定义隐式网格和指定隐式网格轨道尺寸。

图解CSS: Grid布局(Part5)

前面花了两个章节(Grid布局 Part3Part4)介绍了在grid-template-columnsgrid-template-rows 中使用固定长度值,动态值和一些关键词来设置网格轨道的大小。除了这些之外,还可以使用一些函数,比如minmax(min, max)repeat() 等来设置网格轨道大小。在这一章节点,主要围绕着在 grid-template-columnsgrid-template-rows 属性中如何使用函数(minmax(min, max)repeat())设置网格轨道尺寸,感兴趣的话,请继续往下阅读。

图解CSS: Grid布局(Part4)

“图解CSS:Grid布局” 系列第三部分 主要探讨了,在 grid-template-columnsgrid-template-rows 中使用长度值来设置网格轨道尺寸大小。这里长度值指的是使用不同单位(比如,px%emremvw等)值,并且花了较长的篇幅和大家探讨了 fr (弹性系数,又称<flex>系数)给网格轨道尺寸带来的变化以及 fr 在网格轨道中是怎么计算的。不过,在网格布局中,除了使用上一章节中用的带有不同单位的长度值之外,还可以使用一些关键词,比如接下来要介绍的 noneauto(我们熟悉的),min-contentmax-contentfit-content 等关键词以及fit-content()函数。阅读完这篇文章之后,你就能了解这些关键词是如何帮助我们来设置网格轨道尺寸。感兴趣的同学请继续往下阅读。

图解CSS: Grid布局(Part3)

在第二部分中主要介绍了如何使用display来创建网格容器和网格项目,以及怎么使用 grid-template-columnsgrid-template-rowsgrid-template-areas 定义显式网格。在这部分(Part3)将和大家探讨如何设置网格轨道尺寸?简单地说,在grid-template-columnsgrid-template-rows 中可以显式设置网格轨道大小(列宽和行高),而且设置大小的方式有很多种方式,比如使用不同的长度单位,使用关键词,使用CSS函数等来设置网格轨道大小。如果你感兴趣的话请继续往下阅读。

图解CSS: Grid布局(Part2)

在上一节中,主要介绍了 CSS 网格布局中的一些重要概念和相关术语。从这些概念和术语中,从侧面也再次说明CSS 网格布局到目前为止是最为复杂的一个布局系统,换句话说,CSS 网格布局系统中会有很多属性,这些属性和 Flexbox 布局有些类似,有些属性只能作用于网格容器,有些属性只能作用于网格项目。而在这篇文章中,先从可用于网格容器的属性,即使用display属性创建网格容器和网格项目, grid-template-areasgrid-template-columnsgrid-template-rows 以及这三个属性的简写属性grid-template 来定义显式网格。如果感兴趣的请继续往下阅读。

图解CSS: Grid布局(Part1)

Grid 布局指的是 CSS Grid Layout,它和以往 CSS 框架(CSS Framework)中所说的网格系统(Grid System)有所不同。它是一个基于网格的二维布局系统,在 CSS 中有三个版本的规范(Level 1Level 2Level 3,其中 Level 1 和 Level 2 已进入 W3C 规范 TR 阶段,Level 3 目前还在 ED 阶段)从不同的角度定义 CSS 网格布局模块,这几个模块是专门为解决布局问题而创建的。另外,到目前为止,在 CSS 的系统中,只有 CSS Grid 布局才是二维布局。同时它也是一个复杂的布局系统,所涉及到布局知识要比以往了解的布局模块(比如我们熟悉的 Flexbox 布局)要复杂得多。为此,在图解 CSS 系列中,将分几篇文章来和大家一起探讨 CSS Grid 布局模块。

页面

返回顶部