我很难跨越第二框来占据第二栏和第三栏。我已经检查过是否有错别字。在屏幕宽度为 1024px 之前,我的页面看起来很棒。下面是我的 html 页面和样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="box">
<img src="css/images/blackberries.jpg" alt="blackberries">
</div>
<div class="box box-two">
<img src="css/images/brunch.jpg" alt="brunch">
</div>
<div class="box">
<img src="css/images/utensils.jpg" alt=" cooking utensils">
</div>
<div class="box">
<img src="css/images/blackberries.jpg" alt="blackberries">
</div>
<div class="box">
<img src="css/images/brunch.jpg" alt="brunch">
</div>
<div class="box">
<img src="css/images/utensils.jpg" alt=" cooking utensils">
</div>
<div class="box">
<img src="css/images/blackberries.jpg" alt="blackberries">
</div>
</div>
</body>
</html>
我的样式表如下。我认为问题出在我的样式表中,但我很难确定是。
.container {
display: grid;
grid-template-rows: repeat(auto, 10rem);
grid-template-columns: repeat(1, 10rem);
gap: 10px;
}
img {
width: 10rem;
height: 10rem;
}
@media screen and (min-width:768px) {
.container{
display: grid;
grid-template-columns: repeat(2, 10rem);
}
}
@media screen and (min-width:1024px) {
.container{
display: grid;
grid-template-columns: repeat(3, 10rem);
grid-template-rows: repeat(4, 10rem);
}
.box-two {
grid-column: span 2 ;
}
}
我尝试过 grid-column: 2 / 4 和 grid-column 命令的其他变体,但它只是添加了额外的列,而不让 box-two 占用多列。我的代码没有出现任何错误,并且我尝试查看是否在其他地方遗漏了任何内容。
我认为你的 CSS 可以按原样工作,但是当你的图像跨越多列时,它不会填充整个单元格,因此它看起来不起作用。
如果运行下面的代码片段(并全屏打开以获取相关布局),您可以看到
box-two
确实 跨越两列,但您的图像仍然是 width: 10rem
,因此它不会增长。
.container {
display: grid;
grid-template-rows: repeat(auto, 10rem);
grid-template-columns: repeat(1, 10rem);
gap: 10px;
}
img {
width: 10rem;
height: 10rem;
visibility: hidden; /* hiding the images for clarity about the grid */
}
.box {
border: 1px solid red; /* so we can see the grid cells */
}
@media screen and (min-width:768px) {
.container{
display: grid;
grid-template-columns: repeat(2, 10rem);
}
}
@media screen and (min-width:1024px) {
.container{
display: grid;
grid-template-columns: repeat(3, 10rem);
grid-template-rows: repeat(4, 10rem);
}
.box-two {
grid-column: span 2;
background: tomato; /* to accentuate this box */
}
}
<div class="container">
<div class="box">
<img src="css/images/blackberries.jpg" alt="blackberries">
</div>
<div class="box box-two">
<img src="css/images/brunch.jpg" alt="brunch">
</div>
<div class="box">
<img src="css/images/utensils.jpg" alt=" cooking utensils">
</div>
<div class="box">
<img src="css/images/blackberries.jpg" alt="blackberries">
</div>
<div class="box">
<img src="css/images/brunch.jpg" alt="brunch">
</div>
<div class="box">
<img src="css/images/utensils.jpg" alt=" cooking utensils">
</div>
<div class="box">
<img src="css/images/blackberries.jpg" alt="blackberries">
</div>
</div>
这可能不是解决方案,但只是为了说明:添加此规则将允许图像放大并填充整个宽度:
.box-two img {
width: 100%;
height: auto;
}
尝试使用精确的 CSS 网格属性(例如 grid-column-start 和 grid-column-end)以更好地控制放置。