在現代網頁設計中，H5 在圖文列表展示上起到了重要的作用，同時 CSS 也為圖文列表的樣式設計提供了更多的靈活性和自定義性。下面就來介紹一下 H5 圖文列表 CSS 的相關知識。

/* 圖文列表展示 */
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 33%;
margin-bottom: 20px;
box-sizing: border-box;
padding-right: 20px;
}
.item:last-child {
margin-right: 0;
}
.img-wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 66.67%;
overflow: hidden;
}
.item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.text-wrapper {
margin-top: 10px;
}
.title {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: #333;
}
.desc {
font-size: 14px;
line-height: 1.5;
color: #666;
}

圖文列表主要使用了 Flexbox 布局，通過設置 flex-wrap 和 justify-content 屬性來控制圖文列表的排版效果。同時，我們也給每個列表項設置了一個寬度，并使用 box-sizing 屬性將 padding 包含在內。這樣做的好處是，當我們給列表項設置了 padding 和 border 屬性時，不會影響列表項的寬度大小。

除此之外，我們還按比例為圖片元素設置了一個 padding-top 屬性，這可以確保圖片在任何分辨率下都能保持固定的比例，不會出現變形的情況。

對于列表項中的標題和描述文本，我們簡單地為它們設置了一些基本的樣式屬性。除此之外，我們還可以根據實際需求在 CSS 中添加更多的效果來豐富我們的圖文列表。