使用 CSS 的图像网格(1)

📌 相关文章

📜 使用 CSS 的图像网格(1)

📅 最后修改于: 2023-12-03 14:49:38.419000 🧑 作者: Mango

使用 CSS 的图像网格

在前端开发中，常见的需求是要将一些图像以网格的形式呈现在页面中。使用 CSS，我们可以轻松地创建出漂亮的图像网格。

准备工作

在开始创建图像网格之前，需要准备好网格布局所需要的图像。可以将这些图像放到一个文件夹中，然后在 HTML 文件中引用它们。例如：

<!DOCTYPE html>
<html>
<head>
	<title>Image Grid Example</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div class="image-grid">
		<img src="img/1.jpg">
		<img src="img/2.jpg">
		<img src="img/3.jpg">
		<img src="img/4.jpg">
		<img src="img/5.jpg">
		<img src="img/6.jpg">
		<img src="img/7.jpg">
		<img src="img/8.jpg">
		<img src="img/9.jpg">
	</div>
</body>
</html>

创建网格布局

接下来，我们需要使用 CSS 创建图像网格的布局。一种常见的方式是使用 display: grid 属性。例如：

.image-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
}

在上面的代码中，我们定义了一个具有网格布局的类 .image-grid，其中 grid-template-columns 属性指定了网格的列数和列宽， grid-gap 属性指定了网格之间的间距。

美化网格

为了让图像网格看起来更加漂亮，我们可以添加一些 CSS 样式来美化它。例如，我们可以给网格中的图像添加比较模糊的边框和一些阴影效果。代码如下：

.image-grid img {
	border-radius: 15px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	filter: blur(3px);
}

在上面的代码中，我们使用了 border-radius 属性来添加圆角边框，使用 box-shadow 属性来添加阴影效果，使用 filter 属性来添加模糊效果。

完整代码

最终的代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<title>Image Grid Example</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div class="image-grid">
		<img src="img/1.jpg">
		<img src="img/2.jpg">
		<img src="img/3.jpg">
		<img src="img/4.jpg">
		<img src="img/5.jpg">
		<img src="img/6.jpg">
		<img src="img/7.jpg">
		<img src="img/8.jpg">
		<img src="img/9.jpg">
	</div>
</body>
</html>

.image-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
}

.image-grid img {
	border-radius: 15px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	filter: blur(3px);
}

我们可以根据自己的需求修改上面的代码来创建出不同样式的图像网格。