如何在css3网格中制作等宽？
如何在css3网格中制作等宽？
提问于 2020-09-20 03:22:50
在css3网格中，我有这个
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin:0;
}
.grid-container {
display: grid;
height:600px;
grid-gap: 2px;
}
/* 600 490 450 400 */
.grid-item {
background-size:100% 100%;
background-position: center;
display:flex;
align-items:flex-end;
cursor:pointer;
transition: background-size 0.5s;
}
.grid-item:hover {
background-size:105% 105%;
box-shadow:inset 0 0 0 2px gray;
}
.grid-content {
margin:10px;
}
.grid-item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
background-image: url('https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
}
.grid-item-2 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* background-image: url('data:image/jpeg;base64,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');
*/
}
.grid-item-3 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
background-image: url('https://www.autocar.co.uk/sites/autocar.co.uk/files/styles/body-image/public/large-2479-s-classsaloon.jpg?itok=dr8F1KfB');
}
.grid-item-4 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* background-image: url('data:image/jpeg;base64,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');
*/
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item grid-item-1">
<div class="grid-content">
<div class="grid-title">Hero article 1</div>
<div class="grid-abstract">This is a test abstract text. This is a test abstract text. This is a test abstract text.</div>
<div class="grid-callout">Learn More -></div>
</div>
</div>
<div class="grid-item grid-item-2">
<div class="grid-content">
<div class="grid-title">Hero article 2</div>
<div class="grid-abstract">This is a test abstract text. This is a test abstract text. This is a test abstract text.</div>
<div class="grid-callout">Learn More -></div>
</div>
</div>
<div class="grid-item grid-item-3">
<div class="grid-content">
<div class="grid-title">Hero article 3</div>
<div class="grid-abstract">This is a test abstract text. This is a test abstract text. This is a test abstract text.</div>
<div class="grid-callout">Learn More -></div>
</div>
</div>
<div class="grid-item grid-item-4">
<div class="grid-content">
<div class="grid-title">Hero article 4</div>
<div class="grid-abstract">This is a test abstract text. This is a test abstract text. This is a test abstract text.</div>
<div class="grid-callout">Learn More -></div>
</div>
</div>
</div>
</body>
</html> https://codepen.io/sneaky666/pen/ExKddgq
要拼贴4张照片，看起来像
____ ____
| |[____]
|____|[_][_]但当我全屏显示浏览器宽度时，它看起来像
___ ____
| |[____]
|___|[_][_]其中左侧的图像宽度比右侧的顶部图像的宽度小。有人知道怎么修吗？
谢谢
回答 2
Stack Overflow用户
发布于 2020-09-20 03:51:25
将width属性添加到项中：
.grid-item-1 {
width: 50vw;
}
50vw意味着宽度将是页面视图宽度的50%，而与屏幕大小无关。但我不知道它是否能在CodePen中工作。我在IDE Visual Studio代码中进行了测试
Stack Overflow用户
发布于 2020-09-20 04:05:55
如果你设置了一个grid-template-columns，可能还设置了grid-area，那么将内容分派到网格中就会变得更加容易。
grid-template-x示例(您的关键字是1fr )
body {
margin: 0;
}
.grid-container {
display: grid;
height: 600px;
grid-gap: 2px;
grid-template-columns: repeat(4, 1fr)
}
/* 600 490 450 400 */
.grid-item {
background-size: 100% 100%;
background-position: center;
cursor: pointer;
transition: background-size 0.5s;
}
.grid-item:hover {
background-size: 105% 105%;
box-shadow: inset 0 0 0 2px gray;
}
.grid-content {
margin: 10px;
}
.grid-item-1 {
grid-column: 1 / span 2;
grid-row-start: 1;
grid-row-end: 3;
background-image: url("https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
}
.grid-item-2 {
grid-column: 3/ span 2;
grid-row-start: 1;
grid-row-end: 2;
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* background-image: url("data:image/jpeg;base64,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");
*/
}
.grid-item-3 {
grid-column: 3;
grid-row-start: 2;
grid-row-end: 3;
background-image: url("https://www.autocar.co.uk/sites/autocar.co.uk/files/styles/body-image/public/large-2479-s-classsaloon.jpg?itok=dr8F1KfB");
}
.grid-item-4 {
grid-column: 4;
grid-row-start: 2;
grid-row-end: 3;
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* background-image: url("data:image/jpeg;base64,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");
*/
}<div class="grid-container">
<div class="grid-item grid-item-1">
<div class="grid-content">
<div class="grid-title">Hero article 1</div>
<div class="grid-abstract">This is a test abstract text. This is a test abstract text. This is a test abstract text.</div>
<div class="grid-callout">Learn More -></div>
</div>
</div>
<div class="grid-item grid-item-2">
<div class="grid-content">
<div class="grid-title">Hero article 2</div>
<div class="grid-abstract">This is a test abstract text. This is a test abstract text. This is a test abstract text.</div>
<div class="grid-callout">Learn More -></div>
</div>
</div>
<div class="grid-item grid-item-3">
<div class="grid-content">
<div class="grid-title">Hero article 3</div>
<div class="grid-abstract">This is a test abstract text. This is a test abstract text. This is a test abstract text.</div>
<div class="grid-callout">Learn More -></div>
</div>
</div>
<div class="grid-item grid-item-4">
<div class="grid-content">
<div class="grid-title">Hero article 4</div>
<div class="grid-abstract">This is a test abstract text. This is a test abstract text. This is a test abstract text.</div>
<div class="grid-callout">Learn More -></div>
</div>
</div>
</div>
首先，也许更明智的做法是将img设置为img标签，而不是bg，并使用object-fit。
资源/提醒：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63972603
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号