【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; / 重置字体 /
}
相关推荐
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app