GUIDE-H5B2A-CASE-045 网格布局示例 - 网页游戏应用布局#2命名网格区域

网格的行列以及区域使用命名网格区域（grid-template-areas）属性来直观的定义。每个字符串是一行（row），每个单词是一个区域（area）。字符串中的单词个数决定了列的数目。注意每个字符串的单词个数（代表列数）必须是相同的。如果一个区域跨多个列，可以使用重复单词。

教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 10775
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@media (orientation: portrait) {
    #grid {
        display: grid;
    
    /* 网格的行列以及区域使用grid-template-areas属性来直观的定义。
    * 每个字符串是一行（row），每个单词是一个区域（area）。字符串中的单词个数
    * 决定了列的数目。注意每个字符串的单词个数必须是相同的。
    * 如果一个区域跨多个列，可以使用重复单词。 */
        grid-template-areas: 
					"title stats"
					"score stats"
					"board board"
					"ctrls ctrls";
        
    /* 通过模板属性创建的行列可以使用grid-template-columns和grid-template-rows属性来定义尺寸函数。*/
        grid-template-columns: auto minmax(min-content, 1fr);
        grid-template-rows: auto auto minmax(min-content, 1fr) auto
    }
}
@media (orientation: landscape) {
    #grid {
        display: grid;
        
    /* 为横屏模式定义同名模板属性，元素位置有所调整以适应横屏空间。*/
    	grid-template-areas: 
					"title board"
					"stats board"
					"score ctrls";
        grid-template-columns: auto minmax(min-content, 1fr);
        grid-template-rows: auto minmax(min-content, 1fr) auto
    }
}

/* grid-area 属性把一个网格项（grid item）放进该网格的一个命名区域（named region）中去。
* 比如第一行把#title选择器所选中的元素放到了名为title的网格区域中。*/
#title    { grid-area: title }
#score    { grid-area: score }
#stats    { grid-area: stats }
#board    { grid-area: board }
#controls { grid-area: ctrls }

/* NO-BEAUTIFY */
div {
    padding: 10px;
    margin: 5px;
    border: 1px dashed #222;
}
#grid {
    background: white;
  	border: 7px solid #f12f16;
}

HTML

教程

编辑器支持Emmet

快捷键

教程

HTML5 CSS3如何制作带内容预览和运动悬停动效的网格布局

GSAP+CSS3 DrawSVGPlugin Values使用演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：