gird布局(网格布局)

1、什么是Grid布局

Grid布局即网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。

我们通过在元素上声明display:grid或者display:inline-grid来创建一个网格容器，这个元素的所有直系子元素将成为网格项目。

grid-template-columns和grid-template-rows属性来定义网格中的行和列

例1

<template><div class="gird"><div class="item1">item1</div><div class="item2">item2</div><div class="item3">item3</div><div class="item4">item4</div><div class="item5">item5</div><div class="item6">item6</div></div>
</template><script>
export default {}
</script><style lang="less" scoped>
.gird {display: grid;// 3列，每列100px  repeat(3, calc()// 此处也可以通过计算获取)grid-template-columns: repeat(3, 100px);// 每行100pxgrid-template-rows: 100px 100px;height: 300px;width: 300px;border: 1px solid #e4e4e4;.item1 {background-color: lightblue;}.item2 {background-color: lightcoral;}.item3 {background-color: lightcyan;}.item4 {background-color: lightgoldenrodyellow;}.item5 {background-color: lightgray;}.item6 {background-color: lightgreen;}
}
</style>

例1效果图

例2

<template><div class="gird"><div class="item1">item1</div><div class="item2">item2</div><div class="item3">item3</div><div class="item4">item4</div><div class="item5">item5</div><div class="item6">item6</div></div>
</template><script>
export default {}
</script><style lang="less" scoped>
.gird {display: grid;// 3列，每列100px  repeat(3, calc()// 此处也可以通过计算获取)grid-template-columns: repeat(3, 100px);// 每行100pxgrid-template-rows: 100px 100px;// 行列间距//   grid-gap: 0;height: 300px;width: 300px;border: 1px solid #e4e4e4;.item1 {// 开始的基线 column垂直上分割的基线grid-column-start: 1;// 结束的基线grid-column-end: 3;background-color: lightblue;}.item2 {// 相当于给了个定位在3-4基线这个格子grid-column-start: 3;// 开始的基线 row水平分割的基线grid-row-start: 1;// 结束的基线grid-row-end: 3;background-color: lightcoral;}.item3 {background-color: lightcyan;}.item4 {background-color: lightgoldenrodyellow;}.item5 {background-color: lightgray;}.item6 {grid-column-start: 4;grid-column-end: 2;background-color: lightgreen;}
}
</style>

例2效果图

gird布局(网格布局)相关推荐

css【详解】grid布局—— 网格布局（栅格布局）
网格布局(Grid)是最强大的 CSS 布局方案 grid布局和 flex布局的区别 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局. Grid 布 ...
【鸿蒙 HarmonyOS】UI 布局 ( 网格布局 TableLayout )
文章目录一.网格布局 TableLayout 一.网格布局 TableLayout 网格布局需要设置整个布局中有多少行 , 多少列 , 每个单元格都可以设置一个组件 , 这个组件可以是单个 , 也 ...
安卓学习笔记11：常用布局 - 网格布局
文章目录零.学习目标一.网格布局概述 1.布局特点 2.继承关系图 3.常用属性 (1)针对布局的属性 (2)针对子控件的属性二.案例演示--计算器界面 (一)运行效果 (二)涉及知识点 (三) ...
CSS布局—网格布局Grid（一）
CSS网格可以定义由行和列组成的二维布局,然后将元素放置到网格中.有些元素可能只占据网格的一个单元,另一些元素则可能占据多行或多列.网格的大小既可以精确定义,也可以根据自身内容自动计算.你既可以将元素 ...
CSS弹性布局网格布局
一.Flexbox 弹性框布局模块,可更轻松设计灵活的响应式布局,而无需使用浮动或定位. 首先应给容器设置display 属性 <div class="flex-container&q ...
Grid 布局 - 网格布局
目录一.什么是Grid布局二.容器属性值 2.1 grid-template-rows和grid-template-columns 2.1.1 grid-template-columns 2.1. ...
android 多行布局,android布局-网格布局
网格布局自android4.0版本后新增的GridLayout网格布局的一些基本内容 GridLayout布局使用虚细线将布局划分为行,列和单元格,也支持一个控件在行,列上都有交错排列 GridLa ...
android功能网格布局,Android布局总结一:GridLayout布局(网格布局)
GridLayout布局简介 GridLayout布局是Android4.0(API Level 14)新引入的网格矩阵形式的布局控件. GridLayout属性介绍本身属性 android:ali ...
CSS - 网格布局（grid）
目录什么是网格布局网格布局与弹性布局的比较网格布局中的概念名词网格容器 display:grid.display:inline-grid 网格轨道 grid-template-rows.gri ...
css 网格布局_CSS网格布局
css 网格布局网格布局 (Grid Layout) CSS Grid Layout, simply known as Grid, is a layout scheme that is the ne ...

gird布局(网格布局)

1、什么是Grid布局

gird布局(网格布局)相关推荐

最新文章

热门文章