当前位置：首页 > wzjs >正文

做网站图片什么软件浏览器正能量网站免费

wzjs 2025/8/9 7:22:44

做网站图片什么软件,浏览器正能量网站免费,赵县住房和城乡建设局网站,wordpress 整体搬家一、Grid 是什么？ Grid（网格布局） 是 CSS 中一种二维布局系统，可以同时控制行和列的排列方式。相比传统的浮动布局和 Flexbox（一维布局），Grid 更适合构建复杂的网页结构（比如仪表盘、…

一、Grid 是什么？

Grid（网格布局） 是 CSS 中一种二维布局系统，可以同时控制行和列的排列方式。相比传统的浮动布局和 Flexbox（一维布局），Grid 更适合构建复杂的网页结构（比如仪表盘、卡片布局等）。

二、核心概念

1. 网格容器（Grid Container）

通过 display: grid 将一个元素定义为网格容器，它的直接子元素自动成为网格项目（Grid Items）。

.container {display: grid;
}

2. 行与列（Rows & Columns）

轨道（Track）：行或列的集合
单元格（Cell）：行和列的交叉区域
网格线（Grid Line）：分隔行或列的线（编号从 1 开始）

三、基础用法

1. 定义行列大小

.container {grid-template-columns: 100px 200px 1fr; /* 3列：100px、200px、剩余空间 */grid-template-rows: 50px auto; /* 2行：50px、自适应高度 */
}

fr 单位：按比例分配剩余空间（类似“份”）
repeat()：简化重复值
grid-template-columns: repeat(3, 1fr); → 3 列等宽

2. 间距控制

.container {gap: 10px; /* 行和列间距均为 10px */row-gap: 20px; /* 单独设置行间距 */column-gap: 15px;
}

四、定位网格项目

1. 按网格线定位

.item {grid-column-start: 1; /* 起始于第1列线 */grid-column-end: 3;   /* 结束于第3列线（跨2列） */grid-row: 2 / 4;      /* 简写：从第2行线到第4行线 */
}

2. 使用 `span` 关键字

.item {grid-column: 1 / span 2; /* 从第1列开始，跨越2列 */
}

五、对齐方式

1. 整体对齐

.container {justify-content: center; /* 水平居中整个网格 */align-content: end;      /* 垂直底部对齐 */
}

2. 单元格内对齐

.container {justify-items: center; /* 所有项目水平居中 */align-items: stretch;  /* 默认拉伸填满单元格 */
}/* 单独控制某个项目 */
.item {justify-self: start;align-self: end;
}

六、响应式布局技巧

1. 自动填充列

.container {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

auto-fill：自动填充尽可能多的列
minmax(200px, 1fr)：列宽最小 200px，最大按比例分配

2. 命名区域（适合复杂布局）

.container {grid-template-areas:"header header""sidebar main""footer footer";
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }