CSS grid 网格布局

一个网格通常具有许多的列(column)与行(row),以及行与行、列与列之间的间隙,这个间隙一般被称为沟槽(gutter)。

创建一个网格容器

css 复制代码
display: grid;

设置列

css 复制代码
grid-template-columns: 200px 200px 200px ···;
// fr 单位: 占居可用空间的份数

设置网格间隙

css 复制代码
grid-gap: 20px;

显隐式网格 可以类比 flex 的主、副轴

minmax(100px, auto) 设置行列长度的最小最大值

自动使用多列填充

css 复制代码
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

放置元素到网格中

基于 网格线

grid-column-start (en-US)

grid-column-end (en-US)

grid-row-start (en-US)

grid-row-end (en-US)

grid-column

grid-row

基于 grid-template-areas

grid 简写

显式网格属性 grid-template

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas,

隐式网格属性

  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

间距属性

  • grid-column-gap
  • grid-row-gap

仅可在一个 grid 属性中声明 显式 或 隐式网格。

此简写声明无法设置网格的槽(gutter),槽会被该声明重置。

相关推荐
leluckys3 分钟前
flutter 专题 六十八 Flutter 多图片上传
前端·javascript·flutter
Enti7c10 分钟前
数据一键导出为 Excel 文件
前端·javascript·excel·jquery
Jinuss11 分钟前
源码分析之Leaflet中control模块Zoom类实现原理
前端·leaflet
qiyue7714 分钟前
用claude3.7,不到1天写了一个工具小程序(11个工具6个游戏)
前端
Linruoxin20 分钟前
理解浏览器视口:为什么你的屏幕分辨率不直接决定网页的显示区域?
前端·css
乌恩大侠21 分钟前
AMD Versal™ AI Edge Series VEK280 Evaluation Kit
前端·人工智能·edge
七公子7728 分钟前
微信小程序常见问题记录合集
前端·微信小程序
the_one28 分钟前
🔥 纯CSS黑科技!仅用1个DIV实现3D立体选项卡
前端·css
逆袭的小黄鸭1 小时前
掌握 JavaScript:理解原型和原型链
前端·javascript·面试
患得患失9491 小时前
【前端】【tailwind】tailwind默认重置了样式
前端·tailwind