Hey there! I totally get where you're coming from—right now you're relying on hardcoded image widths and heights to pull off that masonry grid look, but that's far from ideal. It's not responsive, and you might run into layout shifts once images actually load. Let's walk through some proper, flexible solutions that don't require fixed dimensions:

方法1：使用CSS Grid原生Masonry特性 #

Most modern browsers now support CSS Grid's masonry layout mode, which is the most straightforward native way to build a waterfall grid. No more fixed image dimensions needed:

调整后的核心CSS #

/*************************************** masonry layout ****************************************/
.ansa-btn, .ansa-article-btn {
    display: flex;
    justify-content: center;
    padding: 30px;
    margin-top: 20px;
}
.ansa-btn a, .ansa-article-btn a {
    opacity: 0.24;
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    line-height: 2.14;
    color: #000000;
    text-decoration: underline;
}
.ansa-article-btn {
    padding: 0 30px 30px 30px;
    margin-top: 0;
}

/* 核心Masonry布局逻辑 */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自适应列宽，可调整min值 */
    grid-auto-flow: dense; /* 自动填充空白区域 */
    grid-gap: 30px; /* 统一间距，替代零散的margin */
    padding: 0 15px;
}

/* 自定义部分项的跨列/跨行，还原你原来的布局效果 */
.ansa-mansory-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}
.ansa-mansory-item:nth-child(2) {
    grid-row: span 2;
}
.ansa-mansory-item:nth-child(5) {
    grid-row: span 3;
}

.ansa-item-img {
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%; /* 让图片充满容器 */
}

#ansa-load {
    display: none;
}
.ansa-mansory-item figure {
    margin: 0;
}

简化后的HTML #

Remove all those img-1/img-2 classes and hardcoded width/height attributes—let CSS handle the layout:

<div class="ansa-slider-media">
    <div class="section-inner">
        <div class="masonry-grid">
            <div class="ansa-mansory-item">
                <a href="assets/images/gallery1.jpg" rel="prettyPhoto"><img class="ansa-item-img" src="https://i.ibb.co/9G432QJ/blend.jpg" alt="Gallery image"></a>
            </div>
            <div class="ansa-mansory-item">
                <figure><img class="ansa-item-img" src="https://i.ibb.co/9G432QJ/blend.jpg" alt="Gallery image"></figure>
            </div>
            <div class="ansa-mansory-item">
                <figure><img class="ansa-item-img" src="https://i.ibb.co/9G432QJ/blend.jpg" alt="Gallery image"></figure>
            </div>
            <div class="ansa-mansory-item">
                <figure><img class="ansa-item-img" src="https://i.ibb.co/9G432QJ/blend.jpg" alt="Gallery image"></figure>
            </div>
            <div class="ansa-mansory-item">
                <figure><img class="ansa-item-img" src="https://i.ibb.co/9G432QJ/blend.jpg" alt="Gallery image"></figure>
            </div>
        </div>
        <div class="masonry-grid" id="ansa-load">
            <!-- 重复的项结构同上即可 -->
        </div>
    </div>
</div>

方法2：CSS Columns（兼容旧浏览器备选） #

If you need to support older browsers that don't have Grid Masonry support, CSS Columns is a lightweight alternative:

.masonry-grid {
    columns: 3; /* 固定列数，或用column-width: 250px; 实现自适应 */
    column-gap: 30px;
    padding: 0 15px;
}

.ansa-mansory-item {
    break-inside: avoid; /* 防止单个项被列分割 */
    margin-bottom: 30px;
}

.ansa-item-img {
    object-fit: cover;
    width: 100%;
    display: block;
}

This is super simple, but note that the layout flows top-to-bottom, left-to-right—you can't customize item positions like you can with Grid.

方法3：JavaScript辅助（复杂场景） #

If you're dealing with wildly varying image sizes or need precise control over layout after images load, you can use JS to calculate heights once images are fully loaded. But only use this if CSS solutions aren't enough—native CSS is always better for performance.

For example, you could listen for the load event on all images to ensure layout calculations happen after images are ready, preventing jumpy layout shifts.

Final Takeaways #

• Prioritize CSS Grid Masonry: It's native, responsive, and gives you the most control without hacks.
• Use CSS Columns for older browser support: A simple fallback if needed.
• Ditch hardcoded dimensions: Let containers and CSS handle layout—your component will be way more robust and maintainable.

内容的提问来源于stack exchange，提问作者Asiya Fatima