CSS - grid布局

最新推荐文章于 2024-04-12 19:35:58 发布
最新推荐文章于 2024-04-12 19:35:58 发布
阅读量589 收藏 5
点赞数 1
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33962481/article/details/118384657
版权

文章目录

前言

Grid布局时将容器划分成 “行” 和 “列”
产生单元格, 然后指定 项目所在 的单元格

在这里插入图片描述

一、容器和项目

容器和项目

  • 采用网格布局的区域 , 称为 “容器”.

  • 容器内部采用网格定位的子元素, 称为 “项目”

<div>
	<div><p>1</p></div>
  	<div><p>2</p></div>
  	<div><p>3</p></div>
</div>

  • 最外层的 div 元素就是容器, 内层的三个 div 元素就是项目.

  • 项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的

    元素就不是项目。Grid 布局只对项目生效。

行和列

  • 容器里面的水平区域称为 “行”
  • 垂直区域称为 “列”.

单元格

  • 行和列的交叉区域, 称为 “单元格”

网格线

  • 划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列

二、容器属性

  • Grid布局的属性分成两类
    • 一类定义在容器上面, 称为容器属性.
    • 另一类定义在项目上面, 称为项目属性.

一. display属性

  • display: grid; 指定一个容器采用网格布局.
  • 语法 :
div {
	display: grid;
}
  • 默认情况下, 容器元素都是块级元素, 也可以设为行内元素.
div {
	display: inline-grid;
}

二. grid-template-columns属性 和 grid-template-rows属性

想要多少行或者列, 就填写相应属性值的个数, 不填写自动分配

  • grid-template-columns属性 定义每一列的列宽.
  • grid-template-rows属性 定义每一行的行宽.

基本使用 :

div {
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px 100px;
}

案例 :

<!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>Document</title>
    <style>
    
        .main {
            display: grid;
            width: 600px;
            height: 600px;
            /* 代表三列 */
            grid-template-columns: 100px 100px 100px;
            /* 代表四行 */
            grid-template-rows: 100px 100px 100px 100px;
            border: 2px solid red;
        }

        .item {
            text-align: center;
            line-height: 100px;
            font-size: 50px;
        }

        .item-1 {
            background-color: red;
        }

        .item-2 {
            background-color: pink;
        }

        .item-3 {
            background-color: blue;
        }

        .item-4 {
            background-color: skyblue;
        }

        .item-5 {
            background-color: black;
        }

        .item-6 {
            background-color: darkkhaki;
        }

        .item-7 {
            background-color: yellow;
        }

        .item-8 {
            background-color: yellowgreen;
        }

        .item-9 {
            background-color: darkred;
        }

        .item-10 {
            background-color: deepskyblue;
        }
    </style>
</head>

<body>
	<!-- 容器 -->
    <div class="main">
    	<!-- 项目 -->
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-10">10</div>
    </div>
</body>

</html>

1. repeat()

  • 有时候, 重复写同样的值非常麻烦, 尤其网格很多时, 可以使用repeat()函数
  • repeat() 接受两个参数, 第一个是重复的次数, 第二个参数是所要重复的值.
.box {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(4, 100px);
}
  • repeat() 也重复某种模式.
.box {
    display: grid;
    grid-template-columns: repeat(2, 100px 20px 80px);
    grid-template-rows: repeat(3, 100px);
}
  • 上面的代码定义了6列3行, 相当于创建了两次 宽度分别为100px 20px 80px的列.
    在这里插入图片描述

2. auto-fill关键字

  • 有时, 单元格的大小是固定的, 但是容器的大小不确定
  • 如果希望每一行容纳尽可能多的单元格, 这时可以使用 auto-fill 关键字表示自动填充.
div {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows : repeat(3, 100px);
}

在这里插入图片描述

  • 上面的代码表示每列宽度100px, 每行宽度100px, 创建三行.
  • 然后自动填充, 直到容器不能放置更多的列.

3. fr关键字

  • 为了方便表示比例关系, 网格布局提供了fr关键字
  • 如果两列的宽度分别为 1fr 和 2fr, 表示后者是前者的两倍.
div {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(2, 100px);
}

在这里插入图片描述

4. minmax()

  • 函数产生一个长度范围, 表示长度就在这个范围之中
  • 它接受两个参数, 分别为最小值和最大值.
div {
    display: grid;
	/* 代表两列 */
	grid-template-columns: 1fr minmax(150px, 200px);
	/* 代表三行 */
	grid-template-rows: repeat(3, 100px);
}

上面代码表示两列三行 第一列占父盒子宽度的一半,

5. auto

  • 表示由浏览器自己决定长度
.main {
    display: grid;
    width: 600px;
    height: 600px;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: repeat(4, 100px);
    border: 2px solid red;
}

上面代码表示中间的宽度由浏览器决定, 自动分配

6. 网格线

可以用方括号定义网格线名称

.main {
    /* 代表两列 */
    grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4];
    /* 代表四行 */
    grid-template-rows: repeat(4, 100px);
}

三. column-gap属性和row-gap属性

表示的是item相互之间的距离. 写在容器上

 .main {
    display: grid;
    grid-template-columns: [c1]100px [c2]auto [c3]100px [c4];
    grid-template-rows: repeat(4, 100px);
    /* 列间距  */
    column-gap: 20px;
    /* 行间距  */
    row-gap: 20px;
    border: 2px solid red;
}

四. gap属性

gap 属性有两个属性,
写一个表示行间距和列间距各有指定的间距.
写两个, 第一个表示行间距, 第二个表示列间距.

五. grid-template-areas属性

一个区域由单个或多个单元格组成, 需要在项目属性里面设置

.main {
    display: grid;
    /* 代表三列 */
    grid-template-columns: [c1]100px [c2]auto [c3]100px [c4];
    /* 代表四行 */
    grid-template-rows: repeat(4, 100px);
    /* 行间距20 列间距30px */
    gap: 20px 30px;
    /* 分区 */
   	grid-template-areas: "header header header"
                     	 "main main sidebar"
                     	 "footer footer footer";
    border: 2px solid red;
}

上面代码中，顶部是页眉区域header，底部是页脚区域footer，中间部分则为main和sidebar。
区域不需要利用, 则使用点 (.) 表示

.main {
    display: grid;
    /* 代表三列 */
    grid-template-columns: [c1]100px [c2]auto [c3]100px [c4];
    /* 代表四行 */
    grid-template-rows: repeat(4, 100px);
    /* 行间距20 列间距30px */
    gap: 20px 30px;
    grid-template-areas: 'a . c''d . f''g . i''j';
    border: 2px solid red;
}

五. grid-auto-flow属性

划分网格以后, 容器的子元素会按照属性, 自动放置在每一个网格,
默认顺序是先行后列
可以用grid-auto-flow属性修改默认顺序

默认
在这里插入图片描述
grid-auto-flow: column; 修改排放顺序
在这里插入图片描述

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

六. justify-items属性 和align-items属性

设置单元格内容的水平和垂直的对齐方式
justify-items 表示 水平方向
align-items 表示垂直方向

语法

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

属性

  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • stretch：拉伸，占满单元格的整个宽度（默认值）。

示范

align-items: start;
justify-items: start;

在这里插入图片描述

七. place-items属性

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

语法

place-items: <align-items> <justify-items>;

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

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

语法

.container {
	justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
	align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

属性

  • start - 对齐容器的起始边框。
  • end - 对齐容器的结束边框。
  • center - 容器内部居中。
  • stretch - 项目大小没有指定时，拉伸占据整个网格容器。
  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
  • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

place-content属性

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

语法

place-content: <align-content> <justify-content>

八. grid-auto-columns 和 grid-auto-rows属性

用来设置多出来的项目宽和高

.main {
    display: grid;
    grid-template-columns: [c1]100px [c2]100px [c3]100px [c4];
    grid-template-rows: repeat(3, 100px);
    grid-auto-rows: 50px;
}

在这里插入图片描述

三、项目属性

项目属性定义在项目上面

一. grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性

  • grid-column-start属性：左边框所在的垂直网格线
  • grid-column-end属性：右边框所在的垂直网格线
  • grid-row-start属性：上边框所在的水平网格线
  • grid-row-end属性：下边框所在的水平网格线

二. grid-column 和 grid-row 属性

  • grid-column : grid-column-start 属性和 grid-column-end 属性 的简写形式
  • grid-row : grid-row-start 属性和 grid-row-end 属性 的简写形式.
.item-1 {
    background-color: red;
    grid-column: 1 / 3;
}

上述代码表示1号项目的左边框是第一根垂直网格线. 右边框是第三根垂直网络线.

三. span关键字

这四个属性的值还可以使用span关键字，表示"跨越"

.item-1 {
	grid-column-start: span 2;
}

四. grid-area

指定项目放在哪一个区域

语法

grid-area: b;

用法

.item-1 {
    background-color: red;
    grid-column: span 2;
    grid-area: b;
}

在这里插入图片描述

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

语法

.item {
	grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

.item-1 {
    grid-area: 1/1/3/3;
}

五. justify-self 属性，align-self 属性，place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

语法

.item {
	justify-self: start | end | center | stretch;
	align-self: start | end | center | stretch;
}

属性

  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • stretch：拉伸，占满单元格的整个宽度（默认值）。

place-self

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

place-self: <align-self> <justify-self>;
学习中的小菜鸟.
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Css-grid 网格布局介绍
01-05
概要：CSS Grid 布局是目前 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。它的目标是完全改变我们基于网格的用户界面的布局方式。 ...
学习CSS Grid布局
dianbian4042的博客
05-07 620
一. 重要术语： CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。 FlexBox：一维布局； Grid: 二维布局; Flexbox 和 Grid 能协同工作，而且配合得非常好 网格容器(Grid Container) 应用 display: grid 的元素。这是所有 网格项（gr...
CSS3中的display:grid网格布局介绍
YuKing_HONG的博客
04-09 522
CSS3中的display:grid网格布局介绍 转载这里：https://www.cnblogs.com/jwyblogs/p/11757968.html 用来学习的，如侵权请和联系。 1.网格布局(grid): 　　　　　　　　它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局; 2.基本概念： 　　　　　　　　容器和项目，如图所示： <div class="content"> <div class="b">...
CSS中grid网格布局（秒懂如何实现网格布局）-菜鸟教程
最新发布
百赢出品，必属精品
04-12 1502
网格是一组相交的水平线和垂直线，它定义了网格的列和行。CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。网格布局由一个父元素及一个或多个子元素组成。 运行结果：当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。 3.网格轨道 我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的列
CSS新布局之display: grid
热门推荐
吴小迪的博客
06-23 4万+
我们一起来学习一下CSS 的Grid布局是如何使用的 通过这篇文章以后等我们自己做UI库的时候就会多了一种做法。 我们来使用CSS Grid创建一个超酷的图像网格图，它可以根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行css代码中。这意味着我们不必将HTML与丑陋的类名(如col-sm-2, col-md-4)混杂在一起，也不必为每个屏幕创建媒体查询。 我们首先根据...
css中display: grid 网格布局
yezi_12345的博客
06-08 712
*当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器。**grid-gap 属性是 grid-row-gap 和 the grid-column-gap 属性的简写。** grid-template-columns 属性在网格容器中设置列的数量。**grid-template-rows 属性在网格容器中设置行的高度。**grid-row-gap 属性来设置行之间的网格间距。网格是一组相交的水平线和垂直线，它定义了网格的列和行。
CSS之display:grid的用法和动态:before content内容
c_x_m的博客
12-14 1637
CSS之display:grid的用法和动态:before content内容
CSS-Grid-Area-Naming
03-30
使用CSS网格区域命名的网站布局
styled-css-grid：React React的一个很小CSS网格布局
02-04
styled-css-grid :bento_box: 使用构建的React的微小（〜2kb） 布局 :nail_polish: 。 例子 请参阅。 安装 安装React和 ，然后： $ yarn add styled-css-grid 用法 import React from " react " ; import { Grid ,...
CSS-Grid-WildBeast
03-14
没有当前CSS Grid Layout aprendemos como criar um layout responsivo no CSS utilizando做为CSS Grid Layout的提倡者。 Com elevocêpode criar布局complexos e ainda manter o seu HTML limpo。 技术 HTML CSS ...
css-grid-layout-generator：构建复杂CSS网格布局的最快，最简单的方法
02-06
CSS网格布局生成器 建立复杂CSS网格布局的最快，最简单方法 路线图 不久 自动生成的网格轨道（又名隐式网格轨道） 列和行的repeat（）表示法 列和行的fit-content（）表示法 出口代码 将HTML导出为JSX 将CSS...
css【详解】grid布局—— 网格布局（栅格布局）
朝阳39的博客
04-11 3万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
【CSS3】grid 网格布局
Superman_H的博客
02-17 3192
# 网格布局 ( grid 布局 ) 1. 网格容器：网格容器是所有网格项的父元素；eg: 下例中类名为 container 的 div 就是网格容器 2. 网格项：网格项是网格容器的子元素；eg: 下例中类名为 item 的 div 就是网格项 ```html .container { display: grid; } 网格项 1
CSS3中的display:grid网格布局介绍 flex升级版grid
夜空孤狼啸的博客
05-18 730
grid网格布局，就是将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
CSS3 grid网格布局
xiangxiongfly
04-26 1278
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。
CSS-Grid网格布局笔记
学习，思考，输出
07-11 1628
显示网格：是指item在定义单元格范围内，比如一行三列的布局，若item在这布局中就是显示单元格，不在则为隐式单元格。前提是容器的子元素超过了网络布局定义范围，比如一行三列的布局，正常是三个元素，但隐式单元格就是超过了三个元素。单元格列数跟随容器宽度自适应，宽度最小不会小于100px，行数是一个隐式单元格属性，会自动适应容器大小。上面没有给网格布局设置宽度与高度，以及网格的列数、行数，都是跟随元素和分辨率自动调节网格的列数、行数。默认子元素都是独占一个单元格的，如果要进行合并单元格，除了前面提到的用。
CSS 详解grid布局（网格布局）与应用
zzylj的博客
03-21 1437
CSS 详解grid布局（网格布局）与应用
CSS-网格布局grid-二维-dispaly-grid
weixin_47295886的博客
07-16 236
stretch默认占满整个单元格的宽度 nth-child(1){ /*代表了item类型的第一个子元素*/ grid各种属性的使用
css+grid布局
02-23
CSS Grid布局是一种用于网页布局的强大的CSS模块。它提供了一种二维网格系统，可以将页面划分为行和列，并通过在网格单元中放置元素来创建复杂的布局。 使用CSS Grid布局，你可以轻松地定义网格容器和网格项。网格...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值