随着Web设计越来越注重响应式和自适应，设计出一个既美观又灵活的图文网格布局变得至关重要。本文将向您展示如何使用HTML和CSS创建一个响应式图文网格布局，同时保持代码的语义化和自动排列的灵活性。
HTML结构
为了保持语义化和结构化，我们使用HTML5的标签，例如 <section> 和 <article> 来组织内容。
<section class="grid-container"> <article class="grid-item"><img src="image1.jpg" alt="Image 1"></article> <article class="grid-item"><img src="image2.jpg" alt="Image 2"></article> <article class="grid-item"><img src="image3.jpg" alt="Image 3"></article> <!-- 可以根据需要添加更多 .grid-item 容器 --> </section>
CSS布局
接下来，我们将使用CSS来实现响应式布局。我们将使用Flexbox，它提供了更灵活的布局选项，并允许我们轻松地在不同屏幕尺寸上调整布局。
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.grid-item {
flex: 1 1 50%;
margin-bottom: 20px;
}
/* 响应式设计：调整大屏幕上每行的项目数 */
@media (min-width: 768px) {
.grid-item {
flex: 1 1 30%;
}
}
/* 确保图像填充整个容器 */
.grid-item img {
width: 100%;
height: auto;
}解释
.grid-container 使用Flexbox布局，并通过 flex-wrap: wrap; 使子元素在行内自动换行。
.grid-item 默认占据父容器的50%宽度，并在屏幕宽度大于768像素时调整为30%宽度。
.grid-item img 确保图像宽度为100%，以适应父容器的宽度。
结论
通过以上步骤，您已经学会了如何使用HTML和CSS创建一个响应式图文网格布局。这种布局不仅美观且灵活，还保持了代码的语义化和可维护性。您可以根据需要调整媒体查询中的数值，以更好地适应不同设备的屏幕尺寸。