九宫格布局解决方案

背景

还记得在以前开发小程序的时候遇到过一个样式布局问题,就是需要在一个盒子里面布局1-9个小卡片来放照片,卡片的宽高都是固定的,父盒子的宽度铺满,高度是自动。当时我是我想都不想直接flex一把嗦,想着直接搞定,但是布局效果显然在不满足9个的时候就会布局奇怪

css 复制代码
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;

这样的布局肯定是不满足我的期望的

直接上grid

css 复制代码
display: grid; 
grid-template-columns: repeat(auto-fill, 240px); 
justify-content: space-between; 
grid-row-gap: 20px; 
grid-column-gap: 20px;

现在基本上就满足布局的要求了

兼容

其实基本都还行,除了被抛弃那个浏览器0.0

css处理

scss 复制代码
  $width: 100%;
  $count: 3;
  $cellWidth: 100px;
  $margin-auto: calc((100% -  #{$count} * #{$cellWidth})/(#{$count} * 2));

.container {
  box-sizing: border-box;
  width: 375px;
  height: auto;
  background: #000;
  padding:  10px 10px;
  .fake-img {
    display:inline-block;
    width: 100px;
    height: 100px;
    background: red;
    margin: 10px $margin-auto;
  }
}

看起来是有点麻烦,基本思路就是计算盒子两边边距宽度来实现布局,维护基本难度也不大;还顺便学习了预处理器的语法,泰裤辣。

相关推荐
江城开朗的豌豆5 分钟前
webpack了解吗,讲一讲原理,怎么压缩代码
前端·javascript·微信小程序
_xaboy6 分钟前
开源设计器 FcDesigner 限制组件是否可以拖入的教程
前端·vue.js·低代码·开源·表单设计器
江城开朗的豌豆9 分钟前
Webpack配置魔法书:从入门到高手的通关秘籍
前端·javascript·微信小程序
江城开朗的豌豆13 分钟前
玩转小程序生命周期:从入门到上瘾
前端·javascript·微信小程序
im_AMBER20 分钟前
React 10
前端·javascript·笔记·学习·react.js·前端框架
Moment24 分钟前
记录一次修改 PNPM 版本,部署 NextJs 服务时导致服务器崩溃的问题 😡😡😡
前端·javascript·后端
浪裡遊26 分钟前
css面试题1
开发语言·前端·javascript·css·vue.js·node.js
钮钴禄·爱因斯晨32 分钟前
不只是字符串:Actix-web 路由与 FromRequest的类型安全艺术
前端·安全
杜子不疼.38 分钟前
仓颉语言构造函数深度实践指南
java·服务器·前端
IT_陈寒39 分钟前
我用这5个JavaScript性能优化技巧,让页面加载速度提升了60%
前端·人工智能·后端