grid布局基本术语解释和grid属性演示 - PHP学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > grid布局基本术语解释和grid属性演示

博主信息

博文 11

粉丝 0

访问量 12734

专题推荐

更多>

grid布局的基本术语解释:

网格容器：整个使用grid布局的区域都叫做网格容器。
网格项目：网格容器内部采用网格定位的子元素。
网格单元：网格项目位于的一个单元格或者多个单元格，都叫网格单元。
网络区域：网格容器生成的全部模块/区域。
网格轨道：网格生成的行与列。
1. grid-template-columns,生成网格列
2. grid-template-rows,生成网格行
轨道间隙：网格轨道中的间隙。由gap设置，gap：10em{水平，行与行之间间隙} 5em{垂直，列与列之间间隙}，或者gap：10em{每个网格单元之间的间隙}
实例演示今晚学到的全部grid新属性, 必须有图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            display: grid;
            /* 转为网格容器 */
            grid-template-columns: 10em 10em;
            /* 生成两列的轨道，每列宽度10em */
            grid-template-rows: 10em 10em;
            /* 生成两行的轨道，每列行高10em */
            /* gap: 1em 2em; */
            /* 生成网格之间的间隙，水平（行间隙）为1em，垂直（列间隙）为2em */
            gap: 1em;
            /* 生成网格之间的间隙，水平（行间隙）和垂直（列间隙）都为1em */
            /* 前面生成的网格模板是两行两列的共计四个，下面的网格项目第五个就是：
            隐式网格单元 */
            grid-auto-flow: row;
            /* 默认项目排列方向 ,行优先*/
            /* 行优先时候可以设置行高，不能设置列宽 */
            /* 行高设置方式： */
            grid-auto-rows: auto;
            grid-auto-rows: min-content;
            /* 浏览器自动设置高度 */
            grid-auto-rows: 10em;
            /* 给行高设置一个10em的固定高度 */
            grid-auto-rows: minmax(10em, auto);
            /* 设置一个最小10em，最大自适应的行高 */
            grid-auto-flow: column;
            /* 将项目排列方向改成列 */
            /* 列优先时候可以设置列宽，不能设置行高 */
            /* 列宽设置方式： */
            grid-auto-columns: auto;
            grid-auto-columns: min-content;
            /* 浏览器自动设置宽度 */
            grid-auto-columns: 10em;
            /* 给行高设置一个10em的固定宽度 */
            /* grid-auto-columns: minmax(10em, auto); */
            /* 设置一个最小10em，最大自适应的列宽 */
        }
        .container>.item {
            width: 3em;
            height: 3em;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <!-- container：网格容器 -->
    <div class="container">
        <!-- item：网格项目 -->
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>
</html>