网格布局（grid布局）

网格布局

他可以将页面分为多个网格，可以任意组合不同的网格，做出各种各样的布局。
网格布局为二维性质的。

设置行、列间距

grid-row-gap:1rem ;行间距

** grid-column-gap: 1rem ;列间距**

** grid-gap: 1rem;**设置行列间距

设置容器的列宽和与行高

**grid-template-columns: ;**列宽和列数

**grid-template-rows: ;**行宽与行数

取值：一组空格代表一组值（几个值就是几行or列）

取值的方式

px
grid-template-columns: 70% 30%; 百分比
grid-template-columns: 1fr 1fr 1fr;按比例分配剩余空间
grid-template-columns: repeat(3, 1fr);函数法（列数，列宽）

grid-auto-rows: minmax(100px ,auto);
minmax(最小值，最大值)

容器空间不足时，最小按指定的最小值显示
容器空间有剩余，最大按指定的最大值显示

单元格在布局里面的垂直位置与水平位置属性

**justify-content水平位置

align-content 垂直位置**

start网格线的起始区域对齐
end网格线的结束区域对齐
center行轴线的中心区域对齐
stretch为默认值

对于单个单元格进行设置

self

align-self
justify-self
具体属性同上

实现跨行跨列

grid-column
grid-row

如 grid-column: 1/3;（起始，中止）

grid-area 属性

定义网格模板
grid-area属性指定项目放在哪一个区域
使内容规范

网格布局（grid布局）相关推荐

Css网格布局-Grid布局
Grid 概念 Grid布局是一种二维布局方法,能够在行和列中布置内容.因此在任何网格中都有两个轴,横轴(即行轴,内联)和纵轴(即列轴,块). 什么是网格网格是一组相交的水平线和垂直线,它定义了网格 ...
CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局文字发光 & 图 ...
Web:flex模拟移动商城首页页面布局/grid布局的相关属性
flex模拟移动商城首页页面布局 1.布局页面导航大家可以看到图片上的红色边框,用了flex布局,布局了一个多行容器,采用的是无序列表ul. css代码块 /* 设置导航样式,定义flex容器 */ ...
CSS基本布局——grid布局
grid布局简介: Grid布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局. 基本概念: 容 ...
最强大的 CSS 布局 —— Grid 布局
Grid 布局是什么? Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小.位置.层次等关系.号称是最强大的的 CSS 布局方案,是目 ...
Grid 布局 - 网格布局
目录一.什么是Grid布局二.容器属性值 2.1 grid-template-rows和grid-template-columns 2.1.1 grid-template-columns 2.1. ...
Grid布局和Flex布局
Flex布局(弹性布局) Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局.行内元素也可以使用Flex布局. 采用Flex布局的元素,称为Flex容器.flex ...
从零开始学前端：grid布局和音频 --- 今天你学习了吗？（CSS：Day24）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:OPPO商城轮播图 - 今天你学习了吗?(CSS:Day23) 文章目录从零开始学前端:程序猿小白也可以 ...
grid php 用法,grid布局主要用法
1. 初识grid布局grid布局页脚网格布局, 格栅布局. 它的布局方式有类似flex布局, grid布局也有容器和项目的概念, 除此之外,还有:单元格, grid容器可以划分为n行m列个单元格. ...
css的grid布局
css的grid布局 grid布局即网格布局是一种二维布局,可以同时控制行和列的排布和对齐方式,grid布局由水平线和垂直线构成,两条水平线之间的区域叫做行轨道,两条垂直线的区域叫做列轨道. 使用这种 ...