grid简单了解

最新推荐文章于 2022-06-11 16:59:46 发布

@lao_lao

最新推荐文章于 2022-06-11 16:59:46 发布

阅读量1.4k

点赞数

分类专栏：作业用到知识文章标签： css

本文链接：https://blog.youkuaiyun.com/abclaolao/article/details/105774793

版权

作业用到知识专栏收录该内容

2 篇文章

订阅专栏

本文是关于CSS Grid布局的新手入门教程，介绍了容器与项目、行与列的概念，以及display、grid-template-columns/rows、grid-gap和grid-template-areas等核心属性的用法，帮助初学者快速掌握Grid布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新手入门grid

最近小编需要完成一个web小作业，用到了Grid。那什么又是Grid呢？怎么使用呢？小编便接着写作业使用到的知识点作个记录。
网格布局（Grid）是最强大的 CSS 布局方案。它能够将网页划分成一个个网格，通过合理配置实现不同模块内容的设计。
如图：实现了划分模块

接下来我们将了解Grid的一些基本概念。

1.1容器和项目

<div class="wrapper">
        <div><p>一起学习Grid呀</p></div>
</div>

采用网格布局的区域，称为"容器"（container），例如最外层的

元素即为容器。容器内部采用网格定位的顶层子元素，称为"项目"（item），例如内层的

元素，也就意味着

元素不是项目。而Grid只对项目生效。

1.2行与列以及单元格、网格线

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。行和列的交叉区域，称为"单元格"（cell）。划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
介绍行列
了解基本概念后，接下来讲解其属性。Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

2.1容器属性

2.1.1display属性

display: grid指定一个容器

采用网格布局。

div {
  display: grid;
}

效果图：
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>grid flex</title>
    <style>
        * {
    margin: 0;
    padding: 0;
          }

    .wrapper {
    margin: 10px auto;
    width: 1000px;
    height: 500px;
    display: grid;
    background-color: rgb(111, 40, 182);
    **grid-template-rows: repeat(4, 100px);
    grid-template-columns: repeat(8, 100px);**
    /* text-align: center; */
    grid-template-areas:
        'item1 item1 item2 item2 item3 item3 item4 item5'
        'item6 item7 item8 item8 item8 item8 item9 item9'
        'item10 item11 item8 item8 item8 item8 item12 item12'
        'item13 item13 item8 item8 item8 item8 item12 item12'
    ;
    gap: 1rem;
    justify-content: center;
    align-content: center;
}

.item8 img {
    width: 100px;
}

.item13 img {
    width: 50px;
    height: 50px;
}
.item10 img{
    width: 50px;
    height: 50px;
}
.item {
    display: grid;
    justify-content: center;
    align-content: center;
}

.a1 {
    grid-area: item1;
    background-color: rgb(0, 255, 255);
}

.a2 {
    grid-area: item2;
    background-color: rgb(152, 0, 152);
}

.a3 {
    grid-area: item3;
    background-color: rgb(255, 101, 7);
}

.a4 {
    grid-area: item4;
    background-color: rgb(172, 34, 66);
}

.a5 {
    grid-area: item5;
    background-color: rgb(219, 85, 51);
}

.a6 {
    grid-area: item6;
    background-color: rgb(44, 129, 236);
}

.a7 {
    grid-area: item7;
    background-color: rgb(107, 182, 37);
}

.a8 {
    grid-area: item8;
    background-color: rgb(172, 34, 66);
}


    </style>
</head>
<body>
    <div class="wrapper">
        <div class="item a1">1</div>
        <div class="item a2">2</div>
        <div class="item a3">3b</div>
        <div class="item a4">4</div>
        <div class="item a5">5</div>
        <div class="item a6">6</div>
        <div class="item a7">7</div>
        <div class="item a8">8</div>
        
    </div>
</body>
</html>

2.1.2grid-template-columns 和grid-template-rows 属性

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。除了使用绝对单位px，也可以使用百分比。

2.1.3grid-row-gap 属性，grid-column-gap 属性，grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。

grid-gap: <grid-row-gap> <grid-column-gap>;

grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

这次小作业基本就是用到这些了。