【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; / 重置字体 /
}
相关推荐
奋斗的小羊羊32 分钟前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿38 分钟前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡38 分钟前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友2 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
路灯下的光2 小时前
用scss设计一下系统主题有什么方案吗
前端·css·scss
l_tian_tian_3 小时前
SpringClound——网关、服务保护和分布式事务
linux·服务器·前端
一只小风华~3 小时前
CSS @media 媒体查询
前端·css·媒体
shix .3 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug4 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome
烛阴4 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript