如何使用HTML、CSS（不使用Bootstrap）在Laravel中实现2行3列图片布局

你可以直接用CSS Grid实现该效果，完全不需要引入Bootstrap，不需要修改Laravel的核心配置，只需要改动视图层代码即可，具体实现步骤如下：

第一步：编写Blade模板中的HTML结构 #

Laravel的视图文件默认放在resources/views目录下，你可以在对应页面的blade模板中编写图片网格的结构代码：

静态写法（固定6张图） #

<div class="image-grid">
  <div class="grid-item">
    <img src="{{ asset('images/图片1路径.jpg') }}" alt="图片描述">
  </div>
  <div class="grid-item">
    <img src="{{ asset('images/图片2路径.jpg') }}" alt="图片描述">
  </div>
  <div class="grid-item">
    <img src="{{ asset('images/图片3路径.jpg') }}" alt="图片描述">
  </div>
  <div class="grid-item">
    <img src="{{ asset('images/图片4路径.jpg') }}" alt="图片描述">
  </div>
  <div class="grid-item">
    <img src="{{ asset('images/图片5路径.jpg') }}" alt="图片描述">
  </div>
  <div class="grid-item">
    <img src="{{ asset('images/图片6路径.jpg') }}" alt="图片描述">
  </div>
</div>

动态写法（从后端传图片数组渲染） #

如果图片数据是从控制器动态传递到视图的，直接用@foreach循环输出即可，示例：

<!-- 控制器中返回return view('你的视图名', compact('images')); -->
<div class="image-grid">
  @foreach($images as $image)
  <div class="grid-item">
    <img src="{{ $image->url }}" alt="{{ $image->alt }}">
  </div>
  @endforeach
</div>

第二步：编写CSS样式 #

你可以把样式写在public/css目录下的自定义css文件中，然后在blade模板头部通过以下代码引入样式：

<link rel="stylesheet" href="{{ asset('css/custom.css') }}">

样式代码如下：

/* 网格容器样式 */
.image-grid {
  display: grid;
  /* 定义3列等宽布局 */
  grid-template-columns: repeat(3, 1fr);
  /* 定义行列间距，可按需调整数值 */
  gap: 16px;
  /* 可选：限制容器最大宽度，居中显示 */
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 15px;
}

/* 网格项样式 */
.grid-item {
  /* 统一图片宽高比，可按需调整，正方形为1/1，宽屏为16/9 */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px; /* 可选：加圆角效果 */
}

/* 图片自适应样式 */
.grid-item img {
  width: 100%;
  height: 100%;
  /* 保持图片比例不变形，多余部分裁剪 */
  object-fit: cover;
  /* 可选：加hover过渡效果 */
  transition: transform 0.3s ease;
}

/* 可选：hover放大效果 */
.grid-item:hover img {
  transform: scale(1.05);
}

/* 响应式适配，小屏幕自动调整列数 */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
}

其他注意事项 #

• 如果图片存储在Laravel的storage目录下，需要先执行php artisan storage:link创建软链，才能通过asset()函数正常访问图片
• gap属性控制图片之间的间距，可根据设计稿调整为对应数值
• 如果不需要响应式适配，删掉最后两段媒体查询的代码即可，布局会固定为2行3列

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