CSS 网格不遵守行和列跨度规则并以随机顺序放置项目

Question

我正在尝试使用 CSS Grid 开发照片库。我有 landscape 张以 -l.jpeg 结尾的照片和 portrait 张以 -p.jpeg 结尾的照片。

Phtot 图库HTML:

<article id="photos">
    <img src="./images/1-l.jpeg">
    <img src="./images/2-l.jpeg">
    <img src="./images/3-l.jpeg">
    <img src="./images/4-l.jpeg">
    <img src="./images/5-l.jpeg">
    <img src="./images/6-p.jpeg">
    <img src="./images/7-p.jpeg">
    <img src="./images/8-l.jpeg">
    <img src="./images/9-p.jpeg">
    <img src="./images/10-l.jpeg">
    <img src="./images/11-p.jpeg">
    <img src="./images/12-l.jpeg">
    <img src="./images/13-p.jpeg">
</article>

照片库CSS:

img {
    max-width: 100%;
} 

#photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 0.5em;
    grid-auto-flow: row dense;
}

这使得照片库看起来像：

照片库现在甚至有 space。为了解决这个问题，我添加了下面的 css、

#photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

但是现在风景图片被放大了，无法看到完整的宽幅图片。因此，为了解决这个问题，我决定 span portrait 2 rows 图片 vertically 和 2 columns landscape 图片 horizontally 使用css.

以下

#photos img[src$="-p.jpeg"] {
    grid-row-end: span-2;
}

现在网格看起来像，

现在，当我为 landscape 个图像添加 css 以跨越 2 个 columns、

#photos img[src$="-l.jpeg"] {
    grid-column-end: span-2;
}

网格凹凸不平space如下图,

我注意到的另一件事是图像没有按照 HTML 的预期顺序放置。这是回购 link - CssGridPhotoGallery.

请指出我做错了什么。

Answer 1

grid-row-end 和 grid-column-end 的语法如下：

#photos img[src$="-p.jpeg"] {
    grid-row-end: span 2;
}
#photos img[src$="-l.jpeg"] {
    grid-column-end: span 2;
}

注意跨度值中删除的连字符。

在我的机器上（Windows 11，Chrome），这个更正后的语法提供了更好看的布局，如下所示：

CSS 网格不遵守行和列跨度规则并以随机顺序放置项目

CSS Grid not respecting row and column span rules and placing items in random order

html

css

grid