Grid布局

梦回东风破

于 2023-05-16 12:40:44 发布

阅读量426

点赞数 1

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_51273606/article/details/130703033

版权

一.什么是Grid布局

Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

二.属性

与Flex布局类似，Grid布局也可分为容器和项目。

    <div class="container">
        <div class="item-1">
            <p class="sub-item">我叫马牛逼</p>
        </div>
        <div class="item-2"></div>
        <div class="item-3"></div>
        <div class="item-4"></div>
        <div class="item-5"></div>
        <div class="item-6"></div>
    </div>

比如以上，container就是容器，item-1、item-和item-3等等是该容器的项目。

首先，第零条属性，这个属性是容器的属性，用来创建网格容器：

display：grid 表示该容器是一个块级元素

display: inline-grid 表示容器元素为行内元素

我们常用gird属性值来创造一个块级元素

接下来，来聊容器的属性：

grid-template-columns 属性，grid-template-rows 属性

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

        .container {
            display: grid;
            /*  1.声明了三列，宽度分别为 200px 200px 200px */
             grid-template-columns: 200px 200px 200px; 
            /*  声明了两行，行高分别为 50px 50px  */
             grid-template-rows: 50px 50px; 
            /* 2.repeat函数，第一个值为列的数目，第二个值为每列的宽度，效果等同于上一个效果 */
            /* grid-template-columns: repeat(3,200px); */
            /* repeat函数，第一个值为行的数目，第二个值为每行的宽度，效果等同于上一个效果 */
            /* grid-template-rows: repeat(2, 50px); */
            }

效果：

在这里插入图片描述

注：
（1）repeat函数：repeat(数字,宽度)，第一个值为列（行）的数目，第二个值为每列（行）的宽度

auto-fill可以替换repeat中的数字，将剩下的空间全部排满，只要能容的下，就排。

        .container {
            display: grid;
            /* auto-fill，将剩下的空间全部排满，只要能容的下，就排 */
            grid-template-columns: repeat(auto-fill,200px);
            grid-template-rows: 50px 50px;
            }

效果：

在这里插入图片描述

原来的六个块，全排到一行

（2）fr：比例片段，表示将剩下的空间按1:2比例排满；

        .container {
            display: grid;
            /*  声明了两行，行高分别为 50px 50px  */
            grid-template-rows: 50px 50px;
            /* fr：比例片段，表示将剩下的空间按1:2比例排满 */
            grid-template-columns: 200px 1fr 2fr;
            }

效果：

在这里插入图片描述

（3）minmax(100px, 1fr)，表示不小于100px，不大于1fr；

（4）auto：由浏览器自己决定长度，默认填满；

2.grid-gap表示表格间隔，它是grid-row-gap,grid-column-gap的简写属性

            grid-gap: 10px 5px; 
            grid-row-gap:10px; 
            grid-column-gap: 5px;

以上代码，第一行等价于第二行加第三行

3.grid-template-areas：区域划分并命名

下面是环境：

    <div class="container">
        <div class="son1">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
        <div class="son">6</div>
        <div class="son">7</div>
        <div class="son">8</div>
        <div class="son">9</div>
    </div>

	.container {
            display: grid;
            background-color: pink;
            grid-gap: 5px;
            width: 900px;
            height: 900px;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            /* 区域划分：将九个单元格划分为三个区域 */
            grid-template-areas: 'a a a'
                'b b b'
                'c c c';
                }

以上代码表明，第一行是a，第二行是b，第三行是c

效果：

在这里插入图片描述

4.grid-auto-flow:单元格排序，默认值为row，即先行后列，将一行排满之后再排列，设为column后就先列后行

            /* grid-auto-flow:单元格排序，默认值为row，即先行后列，将一行排满之后再排列，设为column后就先列后行 */
             grid-auto-flow: column;

使用此属性后效果：

在这里插入图片描述

5.justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）

justify-items: start | end | center | stretch;

align-items: start | end | center | stretch;

start：对齐单元格的起始边缘

end：对齐单元格的结束边缘

center：单元格内部居中

stretch：拉伸，占满单元格的整个宽度（默认值）

place-items属性是align-items属性和justify-items属性的合并简写形式

place-items: start start;

在这里插入图片描述

6.justify-content 属性， align-content 属性， place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）

start - 对齐容器的起始边框

end - 对齐容器的结束边框

center - 容器内部居中

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔（均分位置）

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

stretch - 项目大小没有指定时，拉伸占据整个网格容器（默认值）

------------------------------------我是容器和项目属性的分割线---------------------------------------------------

接下来是项目的属性：

1.指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start 属性：左边框所在的垂直网格线

grid-column-end 属性：右边框所在的垂直网格线

grid-row-start 属性：上边框所在的水平网格线

grid-row-end 属性：下边框所在的水平网格线

.son1 {            
/* 指定一号项目左边框在第二条垂直网格线，右边框在第四条垂直网格线 */
            grid-column-start: 2;
            grid-column-end: 4; 
}

效果：

在这里插入图片描述

2.grid-area:指定项目在哪一个名称的区域

用到了之前的命名区域：

.container {            
/* 1.区域划分：将九个单元格划分为三个区域 */
            grid-template-areas: 'a a a'
                'b b b'
                'c c c';
}
.son1 {
			grid-area: b;
}