CSS网格布局和漫画（由Barry the Cat解释）

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

巴里猫

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

加快浏览器速度

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

在CodePen上查看完整的演示 ，以查看其对不同屏幕尺寸的响应。

1.标记

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

<section class="grid-1">

  <div class="panel panel-title">
    <h1>Barry’s Cushion</h1>
    <p>A tale of lethargy and soft furnishings</p>
  </div>
    <div class="panel panel-1"></div>
    <div class="panel panel-2"></div>
    <div class="panel panel-3">
      <p>“I should probably get up–things to do.”</p>
    </div>
    <div class="panel panel-4"></div>
    <div class="panel panel-5"></div>
    <div class="panel panel-6"></div>
    <div class="panel panel-7">
      <p>“Naaah.”</p>
    </div>
    <div class="panel panel-8"></div>
    <div class="panel panel-9"></div>
    <div class="panel panel-copyright">
      <p>Sleepy Fat Cat by messenj4h<br>&copy; Copyright happily ever after <a href="https://webdesign.tutsplus.com">Envato Tuts+</a>
    </div>
</section>

在这里，我们有一个<section>作为我们的网格，其中有<div class="panel">元素作为我们的网格项目。

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

2.基本样式

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

/* basics */
body {
  background: #f8f7f2;
  padding: 0 10%;
  font: 100%/1.5 'Kalam', cursive;
}

h1 {
  margin: 0;
  line-height: 1;
  padding: 10px;
  color: #251b19;
}

p {
  margin: 0;
  padding: 10px;
  color: #251b19;
  font-size: 1.2em;

a {
  color: #e56633;
}

a:hover {
  text-decoration: none;
}

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

<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet">

3.我们的网格

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

.grid-1 {
  display: grid;
  width: 100%;
  max-width: 770px;
  margin: 10% auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto;
  grid-gap: 25px;
}

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

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

.panel {
  color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0px 0px 0px 5px #251b19;
}

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

让我们看看目前为止！

4.猫的照片

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

.panel-1 {
  background-image: url(cat-1.svg);
}

看起来不错！

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

5.媒体查询

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

/* media query 1 */
@media only screen and (min-width: 400px) {
  
}

/* media query 2 */
@media only screen and (min-width: 600px) {
  
}

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

/* media query 1 */
@media only screen and (min-width: 400px) {
  
  .grid-1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 200px auto 200px 200px auto 200px auto;
  }  
  
}

/* media query 2 */
@media only screen and (min-width: 600px) {
  
  .grid-1 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 200px 200px 200px auto;
  }
  
}

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

跨度

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

.panel-title,
  .panel-3,
  .panel-6,
  .panel-7,
  .panel-copyright {
    grid-column: span 2;
  }

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

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

6.修复我们的三列布局

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

首先使.panel-title跨越三列，而不是两列。 然后可以将.panel-3 （带有文本）设置回grid-column: span 1; 或grid-column: auto;

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

一点点的Flexbox

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

.panel-3 {  
    display: flex;
    align-items: center;
  }

7.覆盖面板

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

.panel-7 {
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  
  .panel-8 {
    grid-column: 1 / span 2;
    grid-row: 4;
  }

在这里，我们将.panel-7 和 .panel-8都定位到grid-column: 1; grid-row: 4; 。 这意味着它们都位于完全相同的位置，无论哪个出现在DOM中的第二个都堆叠在第一个之上。

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

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

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

结论

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

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

翻译自: https://webdesign.tutsplus.com/tutorials/css-grid-layout-and-comics-as-explained-by-barry-the-cat--cms-27617