css图片排列布局

<style>
  .image {
    display: inline-block;
    margin-right: 10px;
  }
</style>
<div class="image">
  <img src="image1.jpg" alt="Image 1">
</div>
<div class="image">
  <img src="image2.jpg" alt="Image 2">
</div>

<style>
  .image {
    display: block;
    margin-bottom: 10px;
  }
</style>
<div class="image">
  <img src="image1.jpg" alt="Image 1">
</div>
<div class="image">
  <img src="image2.jpg" alt="Image 2">
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
  .image {
    width: 100%;
    height: auto;
  }
</style>
<div class="container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

<style>
  .item {
    width: 100px;
    height: 100px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
</style>
<div class="container">
  <div class="item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="item"><img src="image3.jpg" alt="Image 3"></div>
</div>