上查看所有课程
CSS Grid 提供了一种高效的方法来创建响应式和动态布局，以适应不同的屏幕尺寸和设备。
此布局系统建立在灵活的行和列之上。
使用 CSS Grid 的响应式图片画廊
CSS Grid 属性可用于创建响应式图片库，该库可适应不同的屏幕尺寸。
我们可以为桌面和笔记本电脑显示器使用四列布局，为平板电脑使用两列布局，最后为移动设备使用单列布局。
让我们看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Grid Gallery</title>
</head>
<body>
<div class="gallery">
<img class="four-grid-cells"
src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg"
alt="Northern Winter Sky Image" />
<img
src="https://images.pexels.com/photos/1142950/pexels-photo-1142950.jpeg"
alt="Shining Stars Image" />
<img class="wide-image"
src="https://images.pexels.com/photos/3933881/pexels-photo-3933881.jpeg"
alt="A River Flowing Image" />
<img
src="https://images.pexels.com/photos/5409751/pexels-photo-5409751.jpeg"
alt="A cloudy Mountain Image" />
<img
src="https://images.pexels.com/photos/4101555/pexels-photo-4101555.jpeg"
alt="A Winter Rainbow Image" />
<img class="wide-image"
src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg"
alt="A Clean Mountain Lake" />
<img
src="https://images.pexels.com/photos/1142950/pexels-photo-1142950.jpeg"
alt="Shining Stars Image" />
</div>
</body>
</html>.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-auto-flow: dense;
gap: 6px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
img.four-grid-cells {
grid-row: span 2 / auto;
grid-column: span 2 / auto;
}
img.wide-image {
grid-column: span 2 / auto;
}浏览器输出
在上面的例子中：
-
grid-template-columns: repeat(4, 1fr)创建了一个具有等宽列的四列网格布局。
-
grid-auto-rows: auto会隐式添加所需大小的行，直到所有网格项都放置好。
-
grid-auto-flow: dense会将网格内容填充到所有可能的网格单元格中，而不留任何网格项之间的空白。
-
grid-row: span 2 / auto将指定元素跨越两行，并根据需要调整行大小。
-
grid-column: span 2 / auto将指定元素跨越两列，并根据需要调整列大小。
现在，让我们为平板电脑添加以下样式。
@media screen and (max-width: 768px) {
.gallery {
grid-template-columns: 1fr 1fr;
}
}这里，grid-template-columns: 1fr 1fr 属性指定网格应包含两列等宽的列。
浏览器输出
最后，以下样式将两列网格布局更改为移动设备的单列布局。
@media screen and (max-width: 480px) {
/* changes the grid layout to a single column */
div.gallery {
grid-template-columns: 1fr;
}
/* resets the grid placement properties for
the images spanning four grid cells */
img.four-grid-cells {
grid-row: auto;
grid-column: auto;
}
/* resets the grid placement properties for
the images spanning two grid columns */
img.wide-image {
grid-column: auto;
}
}浏览器输出