【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; / 重置字体 /
}
相关推荐
肖师叔爱抽风3 分钟前
使用nvm use切换版本时出现虚假成功信息,使用nvm ls,实际显示没有切换成功,解决方法
前端
猩猩程序员5 分钟前
Rust为什么需要Borrow Trait
前端
BUG收容所所长6 分钟前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
司宸9 分钟前
学习笔记十四 —— 嵌套JSON树结构 实现模糊匹配返回搜索路径
前端
盗德10 分钟前
Vue渲染引擎的范式革命:从虚拟DOM到Vapor模式
前端·vue.js
BUG收容所所长11 分钟前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
阿华的代码王国27 分钟前
【Android】日期选择器
android·xml·java·前端·后端
张拭心1 小时前
拭心 7 月日复盘|个体在 AI 时代的挑战
前端
这是个栗子1 小时前
express-jwt报错:Error: algorithms should be set
前端·npm·node.js
Dolphin_海豚1 小时前
vapor 的 IR 是如何被 generate 到 render 函数的
前端·vue.js·vapor