非常教程

CSS参考手册

网格布局 | Grid Layout

格列开始 | grid-column-start

grid-column-start通过贡献线,跨度,或没有(自动)将其放置格指定网格列内的网格项目的起始位置。该起始位置定义了网格区域的块起始边缘。

/* Keyword value */
grid-column-start: auto;

/* <custom-ident> value */
grid-column-start: somegridarea;

/* <integer> + <custom-ident> values */
grid-column-start: 2;
grid-column-start: somegridarea 4;

/* span + <integer> + <custom-ident> values */
grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: 5 somegridarea span;

/* Global values */
grid-column-start: inherit;
grid-column-start: initial;
grid-column-start: unset;

初始值

汽车

适用于

网格项目和绝对定位的框,其包含块是网格容器

遗传

没有

媒体

视觉

计算值

作为指定

动画类型

离散的

规范的顺序

形式语法定义的独特的非模糊顺序

语法

该属性被指定为单个<grid-line>值。甲<grid-line>值可以被指定为:

  • 要么auto关键词
  • 或者是<custom-ident>价值
  • 或者<integer>
  • 或者两者兼而有之<custom-ident><integer>,被一个空格隔开
  • 或者关键字span连同一个<custom-ident>或者<integer>或者两者兼而有之。

取值

auto一个关键字,指示该属性对网格项目的放置没有任何贡献,表示自动放置,自动跨度或默认跨度1

<custom-ident>如果有一个名为“<custom-ident> -start”的命名行,它会将第一个这样的行添加到网格项的位置。

注意:命名的网格区域会自动生成此表单的隐式命名行,因此指定grid-column-start: foo;将选择该命名的网格区域的起始边缘(除非foo-start在其之前明确指定了另一个命名行)。

否则,这被视为整数1已被指定为一起<custom-ident>

<integer> && <custom-ident>?向网格项的位置贡献第n行网格。如果给出一个负整数,则从显式网格的结束边缘开始反向计数。

如果名称被指定为<custom-ident>,只有具有该名称的行才会被计算在内。如果没有足够的名称行存在,则假定所有隐式网格行都具有该名称,以便找到该位置。

一个<integer>0是无效的。

span && [ <integer> || <custom-ident> ]为网格项的放置提供网格跨度,这样网格项的网格区域的列起始边缘是从结束边缘开始的n行。

如果名称被指定为<custom-ident>,只有具有该名称的行才会被计算在内。如果没有足够的名称行存在,则在与搜索方向对应的显式网格一侧的所有隐式网格线都假定具有该名称,以便计算此跨度。

如果<Integer>省略,则默认为1。负整数或0是无效的。

<custom-ident>不能为span

形式语法

<grid-line>where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

HTML内容

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS内容

#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 100px;
}

#item1 {
  background-color: lime;
  grid-column-start: span 2;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

规范

Specification

Status

Comment

CSS Grid LayoutThe definition of 'grid-column-start' in that specification.

Candidate Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

57.01

20 (12.10240)-ms3

52.0 (52.0)2

10.0-ms3

444

No support5

Feature

Android Webview

Chrome for Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

57.01

57.01

No support

10.0-ms3

44

No support

网格布局 | Grid Layout相关

1.网格 | CSS Grid
2.网格布局 | CSS Grid Layout
3.网格布局中自动放置 | CSS Grid Layout: Auto-placement in CSS Grid Layout
4.网格布局的基础知识 | CSS Grid Layout: Basic Concepts of Grid Layout
5.网格布置中的框对齐方式 | CSS Grid Layout: Box Alignment in CSS Grid Layout
6.网格布局和渐进增强 | CSS Grid Layout: CSS Grid and Progressive Enhancement
7.网格布局和辅助功能 | CSS Grid Layout: CSS Grid Layout and Accessibility
8.网格,逻辑值和写入模式 | CSS Grid Layout: CSS Grid, Logical Values and Writing Modes
9.网格模板区 | CSS Grid Layout: Grid Template Areas
10.使用命名网格线进行布局 | CSS Grid Layout: Layout using Named Grid Lines
11.语言 编辑 高级 使用CSS网格进行基于行的放置 | CSS Grid Layout: Line-based Placement with CSS Grid
12.使用CSS网格布局实现常见布局 | CSS Grid Layout: Realising common layouts using CSS Grid
13.使用CSS网格布局实现常见布局 | CSS Grid Layout: Realizing common layouts using CSS Grid Layout
14.网格布局与其他布局方法的关系 | CSS Grid Layout: Relationship of Grid Layout
15.适合内容 | fit-content
16.flex value
17.网格 | grid
18.网格区域 | grid-area
19.网格自动列 | grid-auto-columns
20.网格自动流 | grid-auto-flow
21.网格自动行 | grid-auto-rows
22.网格列 | grid-column
23.格列端 | grid-column-end
24.格列隙 | grid-column-gap
25.网格差距 | grid-gap
26.网格行 | grid-row
27.网格行结束 | grid-row-end
28.格列隙 | grid-row-gap
29.格行开始 | grid-row-start
30.网格模板 | grid-template
31.网格模板区 | grid-template-areas
32.网格模板列 | grid-template-columns
33.网格模板行 | grid-template-rows
34.设置最小值 最大值函数 | minmax
35.重复 | repeat
CSS

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单