【CSS】九宫格布局

CSS Grid布局(推荐)

实现代码:

html 复制代码
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: grid;
        /* 
        grid-template-columns 设置列宽
        repeat(3, 1fr) 表示三列等宽 1fr 表示一列的宽度
        */
        grid-template-columns: repeat(3, 1fr);
        gap: 10px; /* 行列间距统一 */
        .item {
          background-color: #f0f0f0;
          padding: 10px;
          border-radius: 5px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

Flexbox布局(兼容性优先)

实现代码:

css 复制代码
      .container {
        display: flex;
        flex-wrap: wrap;
      }
      .item {
        flex: 0 0 calc(33.33% - 20px);
        margin: 10px;
        background-color: #f0f0f0;
      }

Float浮动布局(传统方案)

需手动计算容器宽度并清除浮动,适用于老旧浏览器环境。

实现代码:

css 复制代码
.container {
  width: 306px; / (100px3) + (边距6px2) /
  overflow: hidden; / 清除浮动 /
.item {

  float: left;
  width: 94px; / 100px - 边距3px2 */
  margin: 3px;
}

Inline-block布局(特殊场景)

需处理元素间的默认空白间隙,适合需要行内特性的复杂组合。

实现代码:

css 复制代码
.container {
  font-size: 0; / 消除字符间隙 /
  letter-spacing: -5px;
.item {

  display: inline-block;
  width: 33.33%;
  font-size: 16px; / 重置字体 /
}
相关推荐
小高0073 分钟前
instanceof 和 typeof 的区别:什么时候该用哪个?
前端·javascript·面试
im_AMBER3 分钟前
React 03
前端·笔记·学习·react.js·前端框架·react
over6973 分钟前
从代码到歌词:我用AI为汪峰创作了一首情歌
前端
老前端的功夫4 分钟前
JavaScript的`this`指向:送你一张永远不会错的地图
前端
前端没钱4 分钟前
Tauri2+vue3+NaiveUI仿写windows微信,安装包仅为2.5M,95%的API用JavaScript写,太香了
前端·vue.js·rust
用户279428286135 分钟前
HTML5 敲击乐:从零搭建交互式前端音乐项目
前端
KongHen6 分钟前
UTS编写字符串编解码/加密插件(安卓及鸿蒙端)
前端·harmonyos
Cache技术分享13 分钟前
219. Java 函数式编程风格 - 从命令式风格到函数式风格:迭代与数据转换
前端·后端
豆苗学前端15 分钟前
JavaScript原型对象、构造函数、继承与类详解
前端·javascript·后端
飞翔的佩奇18 分钟前
【完整源码+数据集+部署教程】【运动的&足球】足球比赛分析系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球比赛分析系统