CSS3 网格布局(grid layout)基础知识
网格模板（grid-template）属性及其普通写法（longhands）定义了一个固定数量的轨道，构成显式网格。
当网格项目定位在这些界限之外，网格容器通过增加隐式网格线生成隐式网格轨道。
这些隐含的和显式的网格线一起构成隐式网格（implicit grid）。
隐式网格轨道的尺寸由网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）属性来确定。
网格自动流（grid-auto-flow）属性用来控制无明确位置的网格项的自动定位（auto-placement），
一旦显式网格被填满（或者如果没有显式的网格），auto-placement也将导致隐式网格轨道的生成。
自动生成行和列的尺寸：grid-auto-rows 和 grid-auto-columns 属性
如果一个网格项被放到一个未明确定义尺寸的行或列中，隐式网格轨道将被创建来容纳它。
这在两种情况下会发生：通过显式定位到一个超出范围的行或列中，或是由自动定位算法创建额外的行或列。
网格自动列和网格自动行属性用来指定这样的隐式创建的轨道的大小。
我们仍然通过实例来学习这个属性的用法：
#grid { display: grid; grid-template-columns: 20px; grid-template-rows: 20px } #A { grid-column: 1; grid-row: 1; } #B { grid-column: 5; grid-row: 1 / span 2; } #C { grid-column: 1 / span 2; grid-row: 2; }<div id="grid"> <div id="A">A</div> <div id="B">B</div> <div id="C">C</div> </div>
如果一个网格项被放到一个未明确定义尺寸的行或列中，隐式网格轨道将被创建来容纳它。
这在两种情况下会发生：通过显式定位到一个超出范围的行或列中，或是由自动定位算法创建额外的行或列。
网格自动列和网格自动行属性用来指定这样的隐式创建的轨道的大小。
上面这个例子演示了隐式网格轨道的使用。本例中共创建了2行5列，其中显式声明的只有第1行/第1列，除此之外有1个隐含行和4个隐含列。
网格项B位于网格线5，这将自动创建4个隐式网格列，但是由于列3和4中没有任何网格项，所以其宽度塌缩为0。
你可以通过 在线实例自己测试下。（请使用Chrome打开）
注意：由于网格布局是制定中的W3规范，所以浏览器尚未完全支持，目前Chrome已支持。
自动布局：网格自动流（grid-auto-flow）属性
未明确指定位置的网格项将通过自动定位算法来自动放置到网格容器的未占用空间中。
网格自动流就是用来控制自动布局算法如何工作的，指定如何把自动布局的网格项放进网格中。
row
自动布局算法把网格项按顺序填充到每一行，必要时添加新行。这是grid-auto-flow的缺省值。
column
自动布局算法把网格项按顺序填充到每一列，必要时添加新列。
dense
如果指定了dense，将使用“密集”填充算法，它试图把排在后面的体积小的网格项填充到“大个头”网格留下的空隙中，就像我们在汽车后备箱塞物品一样。这有可能会导致填充顺序和代码顺序不同。
如果未指定，则将使用“稀疏”填充算法，只是按顺序摆放，不回溯填空。这可以确保所有网格项保持原有的代码序，但有可能会出现页面空间浪费。
同样的我们通过 在线实例来学习。其中代码注释已经讲得很清楚，这里不再重复。
by iefreer
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
