布局

图解CSS: Grid布局(Part14)

对于大多数 Web 开发者(或 CSSer)而言,更为熟悉的是物理属性,比如widthheighttoprightbottomleft等。但我们在图解 CSS 系列中的《CSS逻辑属性》一章中和大家聊过 CSS 逻辑属性和逻辑值,以及逻辑属性与物理属性,逻辑值与物理值之间的对应关系。在网格布局的整个系列中,前面和大家一起讨论的都是在物理属性和ltr(Left-To-Right)书写模式(或阅读模式)下的网格布局。接下来,在这部分将和大家一起探讨网格布局遇上逻辑属性和书写模式下的表现。

图解CSS: Grid布局(Part13)

在 CSS 中,早期给元素设置宽高比都是通过一些 CSS Hack 来完成,比如padding-top(或 padding-bottom)的值为元素宽高比的百分比。不过自 Chrome90、Firefox88 和 Safar Technology Preview 之后,可以使用原生的 CSS 宽高比属性 aspect-ratio。在这一节中将和大家探讨宽高比(aspect-ratio)在 CSS 网格中的运用。在开始之前,先简单的回忆一下 CSS 的 aspect-ratio

图解CSS:Grid布局(Part12)

如果你熟悉 Flexbox 布局 的话,那么你应该知道 Flex 容器中对 Flex项对齐的方法。这些对齐属性最早只是运用于 Flex 容器和 Flex 项目上(也就是 Flexbox 布局中),后来随着 CSS 规范的变革,运用于 Flexbox 中的对齐方式的相关属性被移动一个新的规范中,即 盒模型对齐 Level 3(CSS Box Alignment Module Level 3) 的规范中,这个规范详细的定义了在不同的布局方式下如何处理对齐问题。目前该规范定义的对齐方式主要运用于 Flexbox 布局和 Grid 布局中。每种布局方式对盒模型对齐规范(CSS Box Alignment)的实现都略有差异,因为实际情况是每种布局方式都有各自的特点以及历史包袱,不能期望在所有的实现方式中都有完美一致的表现(对齐方式的表现)。而我们接下来主要和大家聊的是该规范在 CSS Grid 布局模式下的对齐方式。

图解CSS: Grid布局(Part11)

既然 CSS Grid 布局已经来到我们的身边,我们开始在网上看到越来越多的类似于杂志式的 Web 布局。这并不是不可能的,如果你经常关注 Codepen 的话,你会发现在该平台上有很多类似杂志式的布局。这一切都是有原因的: 它们干净、可读、有吸引力,而且令人熟悉。甚至说,在未来的某一天(这个时间不会太久),你就会接到这样的需求,创建一个类似杂志的布局。 CSS Grid 的到来,让这一切已变得非常的容易,因为 CSS Grid 是一个非常强大的布局系统(通过前面的学习,或许你已经有感知了),可以用于创建复杂、独特的二维布局。而一个类似杂志式的布局有着其自身最大的特征,尤其是使用 CSS Grid 构建一个杂志式的布局更是如此:“将 Web 内容组织成一个结构良好的网格” 和“用重叠的网格项目来突破网格”。对于这两点,CSS Grid 都占有绝对的优势,在 CSS Grid 布局中,我们可以使用网格项目的重叠和定位,使用偏移(inset,即toprightbottomleft)、负边距(margin)和变换(transform)来构构建。但是,在 CSS Grid 中,可以使用更有 逻辑性可读性 的属性和值来建立定位叠加的元素。接下来的内容,我们将围绕着这方面来展开。

图解CSS: Grid布局(Part10)

在 CSS 网格中除了使用明确指定网格项目位置的属性之外,还可以使用grid-auto-flow有不同模式来自动放置网格项目。到目前为止,我们所阐述的网格项目都是用不同的网格区域来放置网格项目,但网格布局中的网格项目有可能是会重叠在一起的。那么接下来的一节中,将和大家一起来探讨网格项目重叠和定位相关的知识。

图解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 来定义显式网格。如果感兴趣的请继续往下阅读。

页面

返回顶部