CSS 是一种网页样式设计语言，它使得我们可以通过有限的代码，实现简单的到复杂的排版布局。其中一个非常有用的技巧就是将四个不同图片进行排列，这样可以方便地进行网页设计。以下是四种常见的排列方式。

1. 水平排列

img {
  display: inline-block;
  width: 25%;
  margin: 0 1rem;
}

使用 display 属性来将图片变成内联元素，并且设置宽度为 25%。在这里设置 margin: 0 1rem; 之间的距离可以根据你想要的间隔大小自定义。

2. 垂直排列

.container {
  display: flex;
  flex-direction: column;
}
img {
  margin-bottom: 1rem;
}

使用 flexbox (弹性布局) 来将父元素设置为列方向，并且通过给图片设置 margin-bottom 垂直间距。

3. 宫格排列

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}
img {
  width: 100%;
}

使用 grid (网格布局) 容器将图片排成两列，设置间距为 1rem。图片则设置宽度为 100%，这样可以自适应父容器宽度。修改 repeat(2, 1fr) 可以调整每行展示的个数。

4. 对角线排列

.container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
img {
  width: 48%;
  margin-bottom: 1rem;
  transform: rotate(45deg);
}

使用 flexbox 来将图片进行对角线排列，设置 justify-content: space-evenly; 来让它们自动排列。img 设置宽度为 48% (两张图片共占用 96% 宽度)，同时设置 margin-bottom 和旋转角度为 45 度。