用 css 网格突破

Question

Following a technique described in this blog post I tried to make a css grid where my images will be wider than the centered text column.按照这篇博客文章中描述的技术，我尝试制作一个 css 网格，其中我的图像将比居中的文本列更宽。 However, I can't make it work and I am unsure why.但是，我无法让它工作，我不确定为什么。

My HTML:我的 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>

And the css:和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;
}

This renders on my machine (Google Chrome, Windows) to this screenshot where the image is not stretched to the full width:这在我的机器（谷歌浏览器，Windows）上呈现为图像未拉伸到全宽的屏幕截图：

I'd like to get this working first, as I aim to have a three-width layout: full width, wide and text (main) width:我想先让这个工作，因为我的目标是有一个三宽度的布局：全宽、宽和文本（主）宽度：

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

For a start, I was hoping full width / text width was possible and after that I'd extend it with a third width (in above "image width").首先，我希望全宽/文本宽度是可能的，然后我会用第三个宽度（在“图像宽度”上方）扩展它。

Did I simply make a typo which I can't find or is this mistake somewhere else?我只是打错了一个我找不到的错字还是这个错误在其他地方？

Answer 1

Grid properties affect grid items which are direct child elements of the grid container (this is similar to a flexbox).网格属性会影响网格项，这些网格项是网格容器的直接子元素（这类似于 flexbox）。 Here you have an extra div wrapper inside the main grid container - remove this:在这里， main网格容器中有一个额外的div包装器 - 删除它：

 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>

Now your image exceeds its container - you can use object-fit on the image - see modified demo:现在您的图像超出了它的容器 - 您可以在图像上使用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 个解决方案

解决方案1
2 2019-04-25 14:25:31

用 css 网格突破

问题描述

1 个解决方案

解决方案1 2 2019-04-25 14:25:31

解决方案1
2 2019-04-25 14:25:31