css3+Grid

CSS Grid 的核心概念有哪些如下

  1. 网格容器(Grid Container):
  • 通过将元素的 `display` 属性设置为 `grid` 或 `inline-grid`,可以将其定义为网格容器。

  • 网格容器内的直接子元素会自动成为网格项(Grid Items)。

```css

.container {

display: grid;

}

```

  1. 网格项(Grid Items):
  • 网格容器内的直接子元素称为网格项。

  • 网格项可以放置在网格的任何位置,甚至可以重叠。

  1. 网格线(Grid Lines):
  • 网格线是网格的分界线,可以是水平线或垂直线。

  • 网格线用于定义网格的行和列。

  1. 网格轨道(Grid Track):
  • 网格轨道是相邻两条网格线之间的空间,可以是行轨道或列轨道。

  • 通过 `grid-template-rows` 和 `grid-template-columns` 定义行和列的大小。

  1. 网格单元格(Grid Cell):
  • 网格单元格是网格的最小单位,由相邻的行线和列线围成的区域。
  1. 网格区域(Grid Area):
  • 网格区域是由四条网格线围成的矩形区域,可以包含一个或多个网格单元格。

常用属性有哪些如下

  1. 定义网格结构
  • `grid-template-columns`:定义列的宽度。

  • `grid-template-rows`:定义行的高度。

  • `grid-template-areas`:通过命名区域定义布局。

```css

.container {

display: grid;

grid-template-columns: 100px 200px auto;

grid-template-rows: 50px 100px;

grid-template-areas:

"header header"

"sidebar main";

}

```

  1. 网格间距
  • `gap`(或 `row-gap` 和 `column-gap`):设置行与列之间的间距。

```css

.container {

gap: 10px; /* 行和列的间距 */

row-gap: 15px; /* 仅行间距 */

column-gap: 20px; /* 仅列间距 */

}

```

  1. 对齐方式
  • `justify-items`:控制网格项在单元格内的水平对齐方式。

  • `align-items`:控制网格项在单元格内的垂直对齐方式。

  • `justify-content`:控制整个网格在容器内的水平对齐方式。

  • `align-content`:控制整个网格在容器内的垂直对齐方式。

```css

.container {

justify-items: center; /* 水平居中 */

align-items: end; /* 垂直底部对齐 */

}

```

  1. 网格项定位
  • `grid-column`:定义网格项跨越的列。

  • `grid-row`:定义网格项跨越的行。

  • `grid-area`:将网格项分配到命名的网格区域。

```css

.item {

grid-column: 1 / 3; /* 从第1列到第3列 */

grid-row: 2 / 4; /* 从第2行到第4行 */

grid-area: header; /* 分配到名为 header 的区域 */

}

```

  1. 自动布局
  • `grid-auto-flow`:控制网格项的自动排列方式(默认是行优先 `row`,也可以设置为列优先 `column`)。

  • `grid-auto-columns` 和 `grid-auto-rows`:定义隐式创建的轨道大小。

```css

.container {

grid-auto-flow: column; /* 列优先排列 */

grid-auto-rows: 50px; /* 隐式行的高度 */

}

```


示例:简单的网格布局

```html

<div class="container">

<div class="item header">Header</div>

<div class="item sidebar">Sidebar</div>

<div class="item main">Main Content</div>

<div class="item footer">Footer</div>

</div>

```

```css

.container {

display: grid;

grid-template-columns: 200px 1fr;

grid-template-rows: 100px 1fr 50px;

grid-template-areas:

"header header"

"sidebar main"

"footer footer";

gap: 10px;

}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

```


优势在于哪些

  1. 二维布局:Grid 可以同时控制行和列,适合复杂的布局需求。

  2. 响应式设计:结合媒体查询,可以轻松实现响应式布局。

  3. 灵活性:支持动态调整网格大小(如 `fr` 单位)和自动填充。

  4. 代码简洁:相比传统的布局方法,Grid 代码更简洁、易维护。


相关推荐
码哥DFS16 分钟前
Flex布局原理
前端·css·css3
长路 ㅤ   2 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
小飞悟3 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
晴殇i5 小时前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
Liudef0618 小时前
2048小游戏实现
javascript·css·css3
小桥风满袖21 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Hilaku21 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
每天开心1 天前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢1 天前
如何提高网站加载速度速度
前端·javascript·css·html
sophister1 天前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html