Question

我正在使用CSS网格。此网格的列和行设置为“自动”。网格中的每个单元格（其中包括）确定尺寸的图像。

网格看起来像这样：问题是：当我减小屏幕尺寸时，不能保持网格单元的比例。看来最左边的列先缩小了：

这导致网格中的丑陋整体。如何确保网格不断地增长和缩小，同时理想地保持图像确定外观？

这是网格CSS的简单版本，带有随附的fiddle。

   .grid {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto;
    display: grid;
    position: relative;
    grid-gap: 12px 12px;
    }

    .element_1 {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    .element_2 {
          grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4;
    }
    .element_3 {
      grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 5;
    }
    .element_4 {
          grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 4;
        grid-row-end: 5;
    }

    .img-responsive {
      width: 100%;
      height: auto;
    }

Answer 1

这是解决方案，您的CSS文件

.grid {
  display: grid;
}

.grid > div img {
  display:inline-block;
  vertical-align:middle;
}

.element_1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}
.element_1 img {
  padding-top:0;
  padding-left:0;
}
.element_2 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
}
.element_2 img {
  padding-top:0;
  padding-right:0;
}
.element_3 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 5;
}
.element_3 img {
  padding-bottom:0;
  padding-left:0;
}
.element_4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
}
.element_4 img {
  padding-bottom:0;
  padding-right:0;
}

.img-responsive {
  box-sizing:border-box;
  padding:6px;
  width: 100%;
  height: auto;
}

@media screen and (max-width:480px) {
  .img-responsive {
    padding:3px;
  }
}

您可以在jsbin

上看到正在运行的示例并使用源代码进行播放

以相同的速度缩小CSS网格的列

1 个答案: