事实证明，CSS Grid非常适合布置在线漫画，特别是如果您希望漫画灵活。 在本教程中，我们将使用猫猫巴里（Barry the cat）演示如何制作响应式漫画。

在本教程中，我借鉴了GraphicRiver的一些作品。 昏昏欲睡的肥猫实际上是一种显示字体，但随附一些可爱的猫矢量-完美地完成了该漫画演示！

加快浏览器速度

别忘了，您需要最先进的浏览器功能才能看到CSS Grid的实际效果，因此，如果您使用的浏览器不支持，请通读CSS Grid Layout：快速入门指南 。 这是我们正在努力的方向：

让我们从布局一些HTML开始：

在这里，我们有一个作为我们的网格，其中有元素作为我们的网格项目。

几个面板中有文字，其余则用于漫画图像。 这里有两个选项：我们可以将图像内嵌在面板中，也可以通过CSS添加图像。 我之所以这样做，是因为它可以更轻松地控制图形的位置和大小，但是您可能会认为内联图像更易于访问。 你的选择。

为了使（皮毛）球滚动，让我们添加一些样式来覆盖我们的版式和颜色：

我选择Kalam作为文本的Google网络字体-我认为它的手写风格非常适合漫画。 您需要将其连接到CSS或通过文档标题中的链接：

首先开始移动版，我们将内容排列在一栏中，每一行都有一个面板：

回顾我们之前的Grid教程，您会回想起分配了我们将要拥有的列数以及它们的宽度。 对执行相同的操作； 在这里，我们定义了其中的11个。 包含图片的图片的高度为200px，带有文字的图片的大小将根据内容自动调整。 最后， 定义了我们的装订线大小。

现在让我们向面板添加一些常规样式：

属性目前还没有任何视觉影响，但是只要我们添加一些背景图像，它们就会立即生效。 充当边界。 如果愿意，还可以在这里使用传统的属性，但是有时阴影框可以提供更大的灵活性。

让我们看看目前为止！

互联网是干什么的，对不对？ 我准备了一些SVG图像添加到面板中，我一步一步地进行了操作：

看起来不错！

但是我不希望所有面板都带有边框。 我将从包含文本的内容（以及第一张图片和最后一张图片） 删除它们（使用 ）。

这些图像还不能完美运行。 可怜的老巴里正在严重收割。 现在是时候超越移动设备，为更大的视口更改网格了。 让我们添加一些媒体查询； 一幅为400px，另一幅为600px（任意数字，可使用任意尺寸）：

在每种情况下，我们将使用它们来更改网格布局。

对于略大的屏幕，我们将使用两列和八行，对于更大的屏幕，将使用三列和五行。

跨度

现在，我们摆脱了单列约束，可以更具创造力。 例如，我们需要标题沿整个漫画的宽度延伸。 包含文本和版权声明的面板也是如此。 即使是某些图像，也可以在全角面板中更好地提供。 因此，我们会将这些详细信息添加到我们的第一个媒体查询中：

我也改变了几种字体，最后给了我们：

我们的两列布局看起来很棒！ 但是，我们的三栏漫画需要修复。

当我们首先使用移动设备时，应用于第一个媒体查询的规则仍在最大的屏幕上生效。 我们需要遍历面板并重设一些样式。

首先使跨越三列，而不是两列。 然后可以将 （带有文本）设置回 或

。 经过几处更改，您应该会得到如下结果：

一点点的Flexbox

我希望对话的第一部分垂直居中，所以让我们使用flexbox来做到这一点。 将以下内容添加到第二个媒体查询中：

网格不限制我们沿页面上下运行等距的块，我们也可以愉快地对面板进行分层。 通过将其分配给与下一个面板相同的网格位置，我们将使文本的最后一点更加有趣：

在这里，我们将 和 都定位到 。 这意味着它们都位于完全相同的位置，无论哪个出现在DOM中的第二个都堆叠在第一个之上。

我们可以使用z-index更改堆叠顺序，因此给一个 将其带到顶部：

注意：既然我们已经有效地删除了一行，那么您需要检查您的是否正常。

让我们为“ Naaah”添加更多样式。 同样，网格项的限制没有您想像的那么多-我们可以以负边距移动它们，甚至可以毫无问题地对其进行转换。 我在面板和其中的段落中添加了一些样式，以实现以下目的：

做得好–这就是我们所建立的！

这是使用CSS Grid的有趣练习，同时向您介绍了一些新的Grid概念。 我希望您喜欢它-现在，如果您不介意我要打个na。

    以上就是本篇文章【CSS网格布局和漫画（由Barry the Cat解释）】的全部内容了，欢迎阅览 ！ 文章地址：http://changmeillh.xhstdz.com/quote/85006.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://changmeillh.xhstdz.com/mobile/ , 查看更多