Question

按照in this blog post所述的技术，我尝试制作一个css网格，使我的图像比居中的文本列宽。但是，我无法使其正常工作，我不确定为什么。

我的HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<main class="grid">
  <div>
    <p>Lorem ipsum [...]</p>

    <p class="full"><a href="#"><img src="https://via.placeholder.com/500x250"></a></p>

    <p>Lorem ipsum [...]</p>
  </div>
</main>
</body>
</html>

和CSS：

img {
    width: 100%;
}

.grid {
    display: grid;
    grid-gap: 20px;
    grid-auto-rows: 150px;
    grid-template-columns: 
        [full-start] minmax(1em,1fr)
        [main-start] minmax(0, 40em) [main-end]
        minmax(1em,1fr) [full-end];
}

.grid > * {
  grid-column: main ;
}

.full {
  grid-column: full;
}

这会在我的计算机（Google Chrome，Windows）上呈现为此屏幕截图，其中图像未拉伸到全宽：

我想首先使用此功能，因为我的目标是采用三宽度布局：全角，宽和文本（主）宽度：

|     |      | text width |      |      |
|     |      | text width |      |      |
|     |                          |      |
|     |  ---   image width  ---  |      |
|     |                          |      |
|     |      | text width |      |      |
|     |      | text width |      |      |
|                                       |
|  ---------   full width    ---------  |
|                                       |
|     |      | text width |      |      |
|     |      | text width |      |      |

首先，我希望可以使用全宽度/文本宽度，然后再将其扩展为第三种宽度（在“图像宽度”上方）。

我只是做了一个我找不到的错字，还是其他地方的这个错误？

Answer 1

网格属性会影响网格项，它们是网格容器的直接子元素（类似于flexbox）。在这里，div网格容器内有一个额外的main包装器-删除此容器：

img {
  width: 100%;
}

.grid {
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 150px;
  grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end];
}

.grid>* {
  grid-column: main;
}

.full {
  grid-column: full;
}

<main class="grid">
  <!-- <div> -->
    <p>Lorem ipsum [...]</p>

    <p class="full">
      <a href="#"><img src="https://via.placeholder.com/500x250"></a>
    </p>

    <p>Lorem ipsum [...]</p>
  <!-- </div> -->
</main>

现在您的图像超出了其容器的大小-您可以在图像上使用object-fit-参见修改后的演示：

img {
  width: 100%;
  height: 100%; /* added */
  object-fit: cover; /* added */
}

.grid {
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 150px;
  grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end];
}

.grid>* {
  grid-column: main;
}

.full {
  grid-column: full;
}

<main class="grid">
  <!-- <div> -->
    <p>Lorem ipsum [...]</p>

    <p class="full">
      <a href="#"><img src="https://via.placeholder.com/500x250"></a>
    </p>

    <p>Lorem ipsum [...]</p>
  <!-- </div> -->
</main>

与CSS网格爆发

1 个答案: