css篇之网格grid 学习

文章目录

一、grid是什么？
二、常用属性
- 1.grid-template-columns
- [2. grid-template-rows](#2. grid-template-rows)
- 3.grid-auto-rows
- 4.column-gap
- 5.row-gap
- 6.grid-column
- 7.grid-row
[三课表练习](#三课表练习)
总结

一、grid是什么？

Grid（网格布局）是 CSS 里的一种布局方式，可以把它想象成表格，但比表格更强大、更灵活。

二、常用属性

前提必须先设置：

bash 复制代码

  display: grid;

1.grid-template-columns

设置列数；一行有多少列；新的 fr 单位代表网格容器中可用空间的一部分；包含多个轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。

语法如下：

bash 复制代码

 grid-template-columns:  1fr 1fr ; 表示一行2个等宽
 grid-template-columns:  1fr 2fr ; 表示一行分成3个等宽 ，第2个元素是第一个元素的2倍宽
 grid-template-columns:  500px 1fr 2fr ; 表示一行分成3个 ，第一个元素固定500px,第2,3个元素将分完剩下的宽度，其中第3元素是第2元素的2倍 
 grid-template-columns:  repeat(4,1fr) ;  repeat(4,1fr) 等同于 1fr 1fr 1fr 1fr
 grid-template-columns: subgrid; 继承父类的排序规则

简单示例：

代码如下：

c 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 style="text-align: center;">grid </h1>
    <div class="contain">
        <div>一</div>
        <div>二</div>![请添加图片描述](https://i-blog.csdnimg.cn/direct/d8cbd49ba2704f55a93bf92b376fb74e.png)

        <div>三</div>
    </div>
    <style>
        .contain {
            /* 关键设置 */
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
         .contain >div{
          /* 给表格加一点边框颜色 */
             border: 1px solid red;
             border-right: none;
             padding: 5px 10px;
         }
          .contain >div:nth-child(3n){
             border-right:1px solid red;
          }
    </style>
</body>

</html>

2. grid-template-rows

控制网格的高度和行数

语法：

bash 复制代码

grid-template-rows: auto;
 grid-template-rows: auto auto auto; 定义三行高度，均为自适应
 grid-template-rows: 40px 4em 40px;定义第1行和第3行都是40px高，第2行是4em的高度
  grid-template-rows: subgrid; 继承父级的行定义

事例：

代码如下：

bash 复制代码

<body>
    <h1 style="text-align: center;">grid </h1>
    <!-- 正常高度 -->
    <div class="contain">
        <div class="box1">一</div>
        <div>二</div>
        <div>三</div>

        <div>四</div>
        <div>五</div>
        <div>六</div>
        <div>七</div>
        <div>八</div>
        <div>九</div>
    </div>
    <br />
    <style>
        .contain {
            /* 关键设置 */
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 50px 10em 50px
                /* row-gap: 100px; */
        }

        .contain>div {
            /* 给表格加一点边框颜色 */
            border: 1px solid red;
            /* border-right: none; */
            padding: 5px 10px;

        }

        .contain>div:nth-child(3n) {
            border-right: 1px solid red;
        }
    </style>
</body>

3.grid-auto-rows

是设置(每一行)网格高度的;

语法：

c 复制代码

grid-auto-rows: 200px; 
grid-auto-rows: minmax(100px, auto); 设置至少高度100px,如果内容过多也可以自动撑开高度

事例：

代码如下：

bash 复制代码

  <!-- 正常高度 -->
    <div class="contain">
        <div>一</div>
        <div>二</div>
        <div>三</div>
    </div>
    <br/>
    <!-- 设置200px高度 -->
    <div class="contain" style="grid-auto-rows: 200px;">
        <div>一 
            <br/>
            <span>设置200px高度</span>
        </div>
        <div>二</div>
        <div>三</div>
    </div>

该处使用的url网络请求的数据。

4.column-gap

设置列之间的间隙

语法：

bash 复制代码

   column-gap: 40px;

事例：

代码如下：

bash 复制代码

<body>
    <h1 style="text-align: center;">grid </h1>
    <!-- 正常高度 -->
    <div class="contain">
        <div>一</div>
        <div>二</div>
        <div>三</div>
    </div>
    <br/>
    <style>
        .contain {
            /* 关键设置 */
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
             column-gap: 40px;
        }

        .contain>div {
            /* 给表格加一点边框颜色 */
            border: 1px solid red;
            /* border-right: none; */
            padding: 5px 10px;
           
        }

        /* .contain>div:nth-child(3n) {
            border-right: 1px solid red;
        } */
    </style>
</body>

5.row-gap

设置行与行之间间距

语法：

bash 复制代码

  row-gap: 100px;

事例：

代码如下：

bash 复制代码

<body>
    <h1 style="text-align: center;">grid </h1>
    <!-- 正常高度 -->
    <div class="contain">
        <div>一</div>
        <div>二</div>
        <div>三</div>

         <div>四</div>
        <div>五</div>
        <div>六</div>
    </div>
    <br/>
    <style>
        .contain {
            /* 关键设置 */
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
             row-gap: 100px;
        }

        .contain>div {
            /* 给表格加一点边框颜色 */
            border: 1px solid red;
            border-right: none;
            padding: 5px 10px;
           
        }

        .contain>div:nth-child(3n) {
            border-right: 1px solid red;
        }
    </style>
</body>

6.grid-column

设置元素占多少列的空间宽度；

语法：

bash 复制代码

grid-column-start: 1; 从最左边的竖线1开始
grid-column-end: 4; 到第四条竖线结束
grid-column: 1/4 ; 等于grid-column-start: 1;grid-column-end: 4;的合并写法；实现就是占3份空间

事例：

代码如下：

bash 复制代码

<body>
    <h1 style="text-align: center;">grid </h1>
    <!-- 正常高度 -->
    <div class="contain">
        <div class="box1">一</div>
        <div>二</div>
        <div>三</div>

         <div>四</div>
        <div>五</div>
        <div>六</div>
    </div>
    <br/>
    <style>
        .contain {
            /* 关键设置 */
            display: grid;
            grid-template-columns: repeat(3,1fr);
             /* row-gap: 100px; */
        }

        .contain>div {
            /* 给表格加一点边框颜色 */
            border: 1px solid red;
            /* border-right: none; */
            padding: 5px 10px;
           
        }

        .contain>div:nth-child(3n) {
            border-right: 1px solid red;
        }
        .box1{
            /* 关键 */
            grid-column: 1/4;
        }
    </style>
</body>

7.grid-row

设置元素占多少行的空间高度；

语法：

bash 复制代码

 grid-row-start: 1;
 grid-row-end: 3;  意味着 从最上边的横线到第三条竖线的位置都是 "一"的 高度 
  grid-row: 1/3;等同于： grid-row-start: 1;grid-row-end: 3;的合并写法

事例：

代码如下：

bash 复制代码

<body>
    <h1 style="text-align: center;">grid </h1>
    <!-- 正常高度 -->
    <div class="contain">
        <div class="box1">一</div>
        <div>二</div>
        <div>三</div>

         <div>四</div>
        <div>五</div>
        <div>六</div>
    </div>
    <br/>
    <style>
        .contain {
            /* 关键设置 */
            display: grid;
            grid-template-columns: repeat(3,1fr);
             /* row-gap: 100px; */
        }

        .contain>div {
            /* 给表格加一点边框颜色 */
            border: 1px solid red;
            /* border-right: none; */
            padding: 5px 10px;
           
        }

        .contain>div:nth-child(3n) {
            border-right: 1px solid red;
        }
        .box1{
            grid-row: 1/3;
        }
    </style>
</body>

三课表练习

要求：实现得到含有5天的课表；要求课表卡片包含内容：星期几，科目名，科目介绍；以上三个内容需要做到顶部水平对齐；

事例：

内容代码如下：

bash 复制代码

 <div class="head">
            <h3>实践课程表</h3>
        </div>
        <div class="contain">
            <div class="card">
                <div class="index">星期一 </div>
                <div class="title"> 计算机科学导论</div>
                <div class="info">涵盖算法基础、数据结构以及现代计算机系统的核心运作原理.</div>
            </div>

            <div class="card">
                <div class="index">星期二</div>

                <div class="title">商业分析与实战 </div>
                <div class="info">与知名企业导师对接，通过真实市场数据进行案例分析与模拟实训。</div>

            </div>
            <div class="card">
                <div class="index">星期三</div>
                <div class="title">高级 UI/UX 设计 </div>
                <p class="info">深入学习交互设计原则，掌握从低保形原型到高保真视觉稿的完整流程。
            </div>
            <div class="card">
                <div class="index">星期四</div>
                <div class="title">人工智能与机器学习 </div>
                <div class="info">探索神经网络、深度学习框架及其在自动化领域和数据预测中的应用。</div>

            </div>
            <div class="card">
                <div class="index">星期五</div>
                <div class="title">全球市场营销</div>
                <div class="info">
                    研究跨国企业在不同文化背景下的品牌战略、增长黑客与数字营销手段。
                </div>
            </div>
        </div>

样式代码如下：

bash 复制代码

 <style>
        .head {
            text-align: center;
        }

        .contain {
            display: grid;
            /* 定义 5 列 */
            grid-template-columns: repeat(5, 1fr);
            /* 关键：定义三行高度，均为自适应 (auto) */
            /*  grid-template-rows 控制网格的高度和行数； 第一行给 .index，第二行给 .title，第三行给 .info */
            grid-template-rows: auto auto auto;
            gap: 0;
            /* 根据需要调整间距 */
        }

        .card {
            display: grid;
            /* 让每个 card 纵向跨越父级的 3 行 */
            grid-row: span 3;
            /* 核心：继承父级的行定义 */
            grid-template-rows: subgrid;

            border: 0.5px solid rgb(202, 202, 207);
            border-right: none;
            padding: 0.5rem;
        }

        /* 处理边框收尾 */
        .card:last-child,
        .card:nth-child(5n) {
            border-right: 0.5px solid rgb(202, 202, 207);
        }

        /* 显式指定每个元素占用的行（可选，但更稳固） */
        .index {
            grid-row: 1;
        }

        .title {
            grid-row: 2;
            font-weight: bold;
            margin: 0.5rem 0;
        }

        .info {
            grid-row: 3;
            color: rgb(191, 185, 185);
            margin: 0;
        }

        /* 基础样式：给不支持 subgrid 的浏览器看 */
        .title {
            min-height: 80px;
            /* 设一个大概的高度，防止对齐太乱 */
        }

        /* 增强样式：如果浏览器支持 subgrid，则启用 */
        @supports (grid-template-rows: subgrid) {
            .card {
                display: grid;
                grid-row: span 3;
                grid-template-rows: subgrid;
            }

            .title {
                min-height: 0;
                /* 恢复自适应 */
                grid-row: 2;
            }
        }
    </style>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了grid的使用

css篇之网格grid 学习

文章目录

一、grid是什么？

二、常用属性

1.grid-template-columns

2. grid-template-rows

3.grid-auto-rows

4.column-gap

5.row-gap

6.grid-column

7.grid-row

三 课表练习

总结

三课表练习