十七、 网格布局

网格布局

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。

1、基本概念

(1)容器

采用grid布局(display:grid)的元素就成为容器

(2)项目

容器下面的直接子元素就是项目

(3)行

容器中的水平区域就是行

(4)列

容器中的垂直区域就是列

(5)单元格

行与列的交叉的区域就是单元格

有一个m行n列的网格,会产生m*n个单元格

(6)网格线

m行n列的网格,会有m+1根水平网格线,会有n+1根垂直网格线

2、设置网格布局

display:grid;
display:inline-grid;

3、容器属性

(1)grid-template-columns属性

定义每一列的列宽

(2)grid-template-rows属性

定义每一行的行高

常用值:

  • px | %

  • 函数

    • repeat(参数1,参数2) 重复某种值或者模式

    参数1代表重复的次数,参数2代表重复的值

    • minmax(参数1,参数2) 产生一个长度值

    参数1代表设置的最小值,参数2代表设置的最大值

  • 关键词

    • auto 自动
    • fr 分配比例关系
  • 网格线名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
    
            /* 设置为网格布局 */
            display: grid;
            /* 设置列宽 */
            /* 设置的是长度单位值 */
            /* 代表的含义: 将网格划分了三列,第一列的列宽是100像素,第二列的列宽是150像素,第三列的列宽是200像素 */
            /* grid-template-columns: 100px 150px 200px; */
            /* 设置行高 */
            /* grid-template-rows: 200px 200px 200px; */
            /* grid-template-rows: 33.3% 33.3% 33.3%; */
            /* grid-template-rows: repeat(3,33.3%); */
            /* grid-template-columns: repeat(3,200px); */


            /* 行高与列宽重复某种模式 */
            /* 将网格划分了四列,第一列与第三列的列宽是100像素,第二列与第四列的列宽是120像素 */
            /* grid-template-columns: repeat(2,100px 120px);
            grid-template-rows: repeat(2,100px 120px 200px); */


            /* minmax() */
            
            /* grid-template-columns: 300px minmax(100px,200px) 250px; */

            /* auto */
            /* grid-template-columns: 100px 300px auto; */
            /* fr */
            grid-template-columns: 100px 1fr 2fr;
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
        .box:nth-child(odd) {
    
            background-color: aqua;
        }
        .box:nth-child(even) {
    
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值