css 网格布局_使用CSS网格构建剪贴簿布局

我儿子最近的任务是在一周内照顾他的学前班泰迪熊，同时有义务带走这些泰迪熊进行冒险，并将您的回忆添加到剪贴簿中。 我非常喜欢创建这种剪贴簿布局，这让我开始思考如何使用CSS Grid构建类似的东西！

复合网格

安迪·克拉克（Andy Clarke）在本次浏览器状态会议上发表了以CSS Grid为灵感的精彩演讲，这对于像我这样的具有设计根源的开发人员确实很有启发。 在其中，他谈到了将印刷设计理念应用于网络以创建引人注目的布局的方式，以及CSS Grid如何不仅使之成为可能，而且比以往更直接。 这些原则之一是使用复合网格。

我们大多数人可能熟悉以某种方式将网格用于Web设计和开发。 实际上，我所要构建的所有网站设计都挂在标准的12列（有时是24列！）的网格上，所有列的宽度相等。 到目前为止，如此可预测。

另一方面，复合网格是通过分层两个或多个网格来创建的。 诸如并排放置在4列网格上的5列网格之类的并置会产生有节奏的图案，并且比常规网格具有更多的动态布局可能性。

图2我们从4列和5列网格开始

图3网格叠加在一起，一个在另一个之上。 结果是一个复合网格。

从心理学和技术的角度来看，这都是适用的-尽管使用了复合网格，但完全有可能建立一个非常普通的布局，但是要有一个更有趣的网格来工作，则可以鼓励创造力的发展！ 安迪（Andy）写了一篇详细的文章，《 启发式设计决策：紧要事项》 ，深入地介绍了复合网格。 还可以观看他在《浏览器状态》中的演讲 。

构建复合电网发电机

复合网格可以很好地转换为CSS网格，因为使用fr单位使其易于实现。 我喜欢在网页设计中使用复合网格的想法，但是我认为计算它们的过程（尤其是网格越复杂）可能会成为一个障碍。 我想要一种按需生成复合网格的方法，因此，在安迪的演讲启发下，我rolled起袖子，搭建了一个小工具来生成和可视化复合网格。 输入两个不同网格的列数（任何一个网格最多10列），然后生成器将它们合并，吐出一个可用于CSS Grid的grid-template-columns属性中的结果值。 例如，具有四列的网格加上具有五列的网格将生成值4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr 。

此工具位于Codepen上 ，因此可以随时使用或对其进行调整以满足您的需求。

为剪贴簿布局创建网格

复合网格是剪贴簿布局的理想选择，在这种布局中，我希望布局感觉有些不可预测和杂乱无章，但仍要保持节奏感和平衡感。 在使用复合网格生成器进行了一些实验之后，我选择了6/5的复合网格，我觉得这给了我足够多的经验。 这给了我一个可以使用的初始网格：

.grid{
	display: grid ;
	grid-template-columns: 5fr 1fr 4fr 2fr 3fr 3fr 2fr 4fr 1fr 5fr ;
	gap: 1rem ;
}

定义网格行

定义网格行比较棘手，并且需要更多的反复试验。 网格中的每张照片都需要重叠。 将网格粗略地画在纸上以了解我需要多少行会很有帮助。

为了保持垂直节奏感，我决定每张照片应该重叠相同的数量。 我将此金额分配给一个自定义属性，以便可以在整个页面中使用它，并在必要时进行更新（ 图4 ）。

图4图像垂直重叠

.grid{
	--verticalPadding: 2rem ;
	--overlap: 6rem ;
}

每个图像还具有一个随附的文本段落。 这需要在上方和下方留出足够的空间，以免重叠或撞到上一张照片。 这意味着在标题的上方和下方添加一个网格行，我认为这是“填充”行。 现在，每个图像至少需要跨越四行网格-在顶部和底部重叠的图像将需要跨越五行。

图5 “填充”行允许在文本块的末尾与下一个图像的开始之间保留最小的空间。

但是我们还没有完成构建网格的工作：我决定在图像本身上设置宽高比，就像真实照片一样。 有些是风景，有些则是肖像。 我希望网格布局能够工作，而不管图像的长宽比或文本的长度如何，因此我需要我的网格行能够适应。

我们可以使用minmax()使这些轨道更灵活，而不是为重叠和“填充”行使用固定值。 这将确保这些行轨道具有最小大小，但是如果内容需要，它们还将扩展。

minmax(var(--paddingundefined auto));

放置物品

一旦我们的网格“脚手架”到位，就该放置一些物品了。 有时使用CSS Grid可能会有些棘手的事情是了解针对任何给定布局将项目放置在网格上的最佳方法。 我们有许多可用的选项–行号， span关键字，命名的行或命名的网格区域–在不同情况下，某些选项的工作效果更好。 但是，没有正确或错误的方法，通常归结为找到最适合您的方法。

只要布局有效，就没有“做错了”这样的事情！

网格线放置

我通常从使用开始和结束值（通常是开始和结束行号）放置项目开始，但是如果我知道某个项目需要跨越的确切轨道数，那么我将使用它，将其视为一个常数。 有时我为重要的“地标”命名网格线（例如wrapper-start和wrapper-end ），但是我很少提到网格线或为网格中的每个项目创建网格区域。 一种对我非常有用的策略是，当我想相对于网格的末端放置项目时，使用负网格线，这在我之前的文章中已有介绍 。 我在列轴上使用负网格线的频率最高，因为在大多数情况下（对于我正在使用的网格），已知已知固定值的列数。

例如，使用grid-column属性将项目从第1行放置到第-1行，将使该项目跨越网格的整个列轴，从第一行到最后一行：

.item{
	grid-column: 1 / -1 ;
}

我可能更倾向于命名网格线的另一种情况是针对具有大量轨迹的网格。 在这种情况下，我们只有10个列轨道，因此对于我来说，在该轴上按行号放置项目感觉很容易。

混合使用正负网格线以及跨度值，将项目放置在列轴上非常简单。 在Firefox开发工具面板中打开网格检查器非常有帮助，因为它使我们能够看到行号。

按网格面积放置

如果我们看一下网格，可以看到我们有很多行要处理。

图7开发工具布局面板中Firefox网格检查器的屏幕截图，显示了我们的网格列和行

尽管我开始按行号在行轴上放置项目，但这很快变得难以管理。 各个项目需要相互重叠，我发现很难跟踪一个项目应该在哪里结束而另一项目应该在哪里开始。 另外，我不想使用负网格线，因为将来很有可能要添加到布局中。 如果我最终在网格中添加了更多的显式行，那么负行号将不再正确，可能会导致很多布局错误！

这是我决定在行轴上创建命名网格区域的时候。 网格区域以两种方式创建：

1. 借助grid-template-areas属性，您可以有效地“绘制”网格布局作为ASCII图像。
2. 使用命名的网格线，通过使用-start和-end作为我们的行名的后缀。

grid-template-areas属性不允许我们为重叠的项目定义区域，因此它对这种特殊布局并没有真正的帮助。 但是，使用命名的网格区域肯定会使生活更轻松。

如果我们在行轴和列轴上都命名线，则会得到一个网格区域（ 图8 ）：

图8在行名后加上-start和-end创建网格区域

然后可以在使用grid-area属性放置项目时引用该区域：

.item{
	grid-area: image ;
}

与使用grid-column和grid-row ，这使我们的代码更简洁，更易于阅读，并直接写出行名：

.item{
	grid-row: image-start / image-end ;
	grid-column: image-start / image-end ;
}

但是这次我们只需要在行轴上命名网格区域。 很好，因为我们可以使用grid-row属性引用它：

.item{
	grid-row: image ;
}

由于我们有大量的行，因此我发现更清晰地垂直编写我们的grid-template-rows属性，以便它反映页面的结构：

grid-template-rows:
/* The first two rows deal with the header */
	auto
	3rem
	/* The rest of the grid content starts here */
	minmax(var( --verticalPadding ), auto )
	minmax( 0 , auto )
	minmax(var( --verticalPadding ), auto )
	var( --overlap )
	minmax(var( --verticalPadding ), auto )
	minmax( 0 , auto )
	minmax(var( --verticalPadding ), auto )
	var( --overlap )
	minmax(var( --verticalPadding ), auto )
	minmax( 0 , auto )
	minmax(var( --verticalPadding ), auto );

现在，将线名添加到正确的位置变得更加简单，并且不容易出错，因为我们可以可视化网格的结构：

grid-template-rows:
	[header-start]
	auto
	[fig1-start]
	3rem
	[header-end]
	minmax(var( --verticalPadding ), auto )
	[p1-start]
	minmax( 0 , auto )
	[p1-end]
	minmax(var( --verticalPadding ), auto )
	[fig2-start]
	var( --overlap )
	[fig1-end]
	minmax(var( --verticalPadding ), auto )
	[p2-start]
	minmax( 0 , auto )
	[p2-end]
	minmax(var( --verticalPadding ), auto )
	[fig3-start]
	var( --overlap )
	[fig2-end]
	minmax(var( --verticalPadding ), auto )
	[p3-start]
	minmax( 0 , auto )
	[p3-end]
	minmax(var( --verticalPadding ), auto )
	[fig3-end] ;

剩下的就是在放置网格项目时引用行轴上的区域名称：

.fig--1{
	grid-column: span 5 / -1 ;
	grid-row: fig1 ;
}

.fig--2{
	grid-column: 1 / span 7 ;
	grid-row: fig2 ;
}

.fig--3{
	grid-column: span 5 / -2 ;
	grid-row: fig3 ;
}

可以在Codepen上浏览完成的结果（ 图10 ）。

图10

演示地址

尽管我还没有付出更多的努力来使此布局响应，但它可用于较小的平板电脑屏幕。 现在，为小屏幕尺寸调整布局将相对简单。 在较小的屏幕尺寸下，我个人会选择一个更简单的网格，因为我们可能会损失许多复杂的视觉效果，即庞然大物的网格。 但是再一次，没有对与错–即使我们中间那些经常与CSS Grid一起工作的人仍然在弄清楚我们前进的方向！

翻译自: https://css-irl.info/building-a-scrapbook-layout-with-css-grid/