【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; / 重置字体 /
}
相关推荐
真的想不出名儿16 分钟前
登录前验证码校验实现
java·前端·python
小高00716 分钟前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
云舟吖20 分钟前
Playwright的元素定位器
前端
我是日安21 分钟前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
浅浅的学一下25 分钟前
实现在富文本中直接Ctrl+C复制图片并自动上传,并支持HTML格式的图片的复制
前端
wifi歪f31 分钟前
🎨 探究Function Calling 和 MCP 的奥秘
前端·ai编程·mcp
BrendanDash31 分钟前
React 19.2 已发布,现已上线 npm!
前端·react.js
sheji341643 分钟前
【开题答辩全过程】以 Web数据挖掘在电子商务中的应用研究为例,包含答辩的问题和答案
前端·人工智能·数据挖掘
whltaoin1 小时前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
敲敲敲-敲代码1 小时前
web系统(asp.net和C#)
前端·c#·asp.net