3.04.19简学网格布局与列布局

以哲_ok

已于 2022-06-15 17:30:27 修改

阅读量374

点赞数

文章标签：前端 html5 javascript

于 2022-06-15 00:33:02 首次发布

本文链接：https://blog.csdn.net/m0_59593735/article/details/125231935

版权

本文简要介绍了CSS网格布局和列布局的概念与实践。在网格布局中，重点讲解了网格项、网格线、网格单元等核心概念，以及如何通过`grid-template-columns/rows`、`grid-template-areas`等属性创建和控制网格。此外，还阐述了`justify-items`、`align-items`等对齐方式。列布局方面，提到了`column-count`、`column-gap`和`column-rule`属性的应用。

摘要由CSDN通过智能技术生成

3.04.19 简学网格布局与列布局

1.简单学习网格布局

1.相关概念

网格项 (Grid Item)
- 网格容器的子代（即直接后代）。
网格线 (Grid Line)
- 组成网格结构的分隔线。它们可以是垂直的（“列网格线”）或水平的（“行网格线”），并位于行或列的任一侧。
- 一行两列的网格容器有2条行网格线，3条列网格线。
网格单元 (Grid Cell)
- 两个相邻的行和两个相邻的列网格线之间的空间。它是网格的单个“单元”。
网格轨迹 (Grid Track)
- 两条相邻的网格线之间的间隔。您可以将它们视为网格的列或行。
网格区域 (Grid Area)
- 四格线包围的总空间。网格区域可以由任意数量的网格单元组成。
简单的产生网格布局的方式：

    + 设置网格容器
        - display：grid
    + 设置行的参数（数量和大小）
        - grid-template-rows:100px 200px ...
        - grid-template-rows:1fr 1fr ...
        - fr为占比的度量
    + 设置列的参数
        - grid-template-columns:50px 60px 70px ...
        - grid-template-rows:1fr 1fr ...
    + 设置行与行之间的间距
        - grid-row-gap:10px
    + 设置列与列之间的间距
        - grid-colums-gap:10px

2.网格容器的属性

display：grid | inline-grid;
- grid：生成块级网格
- inline-grid：生成内联级网格
grid-template-columns
- 通过使用 grid-template-columns 添加多列，该属性值的数量表示网格的列数，而每个值表示对应列的宽度。
grid-template-rows
- 通过使用 grid-template-rows 添加多行，该属性值的数量表示网格的行数，而每个值表示对应行的高度。

用法：

    .container {
        grid-template-columns:  值1 值2 值3;
        grid-template-rows:  值1 值2 值3;
    }

    + 注意：grid-template-rows 与 grid-template-columns 接受的值中包含两个数据
    - track-size： 可以是网格中可用空间的长度，百分比或分数（使用fr单位）
    - line-name：自定义网格线名称

    //案例一：隐式命名
    .container {
        grid-template-columns: 40px 50px auto 50px 40px;
        grid-template-rows: 25% 100px auto;
    }

    //案例二：显式命名（网格线需要括号包裹）
    .container {
        grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
        grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
    }

grid-template-areas（区域模板）

用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>