网格grid布局

grid布局点

  • grid
  • grid-template
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • repeat
  • fr
  • minmax
  • auto-fill
  • fit-content

grid

arduino 复制代码
display: grid

grid-template

css 复制代码
.grid-container {
    display: grid;
    // 设置为3行4列,三行的高度是40px 60px 90px
    grid-template: 60px 60px 90px /auto auto auto auto;  
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}

图示如下:

grid-template-rows

grid-template-rows网格布局中的行数及高度

css 复制代码
.grid-container { 
    display: grid; 
    grid-template-rows: 60px 90px;  //2行,高度是60px 90px
}

grid-template-columns

grid-template-columns 设置网格布局中的列数及宽度

css 复制代码
.grid-container { 
    display: grid; 
    grid-template-columns: 40px  90px  60px auto; 
}
默认值: auto
继承: no
动画: 支持。 阅读关于 animatable
版本: CSS 网格布局模块 Level 1
JavaScript 语法: object.style.gridTemplateColumns="50px 50px 50px"

  • 语法
arduino 复制代码
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
描述
none 默认值,不指定列的大小。
auto 列的大小由容器的大小和列中网格元素内容的大小决定。
max-content 每列的大小设置为该列中最大网格元素的大小。
min-content 每列的大小设置为该列中最小网格元素的大小。
length 长度值,可以是 px 为单位的数值或百分比 %。 0 是默认值。 了解更多长度单位
initial 将此属性设置为默认值。 initial 阅读关于 initial
inherit 从父元素继承该属性。 阅读关于 inherit

grid-template-areas

grid-template-areas属性用于设置网格布局

上级元素的grid-area 属性可以对网格元素进行命名。

下级元素可以通过容器的 grid-template-areas 属性来引用。

每行由单引号内 ' ' 定义,以空格分隔。

. 号表示没有名称的网格项。

默认值: auto
继承: no
动画: 支持。 阅读关于 animatable
版本: CSS 网格布局模块 Level 1
JavaScript 语法: object.style.gridTemplateAreas=". . . myArea myArea"
ini 复制代码
.item1 {
    grid-area: myArea;
}

.grid-container {
    display: grid;
    grid-template-areas: 'myArea myArea . . .';
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}

<div class="grid-container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
    <div class="item9">9</div>
</div>

如下

grid效果为5列,

其中可看到item1的div因为使用了myArea区域,占据2列,其宽度 = div的宽度*2 + grid的gap数值

repeat

fr

在 CSS Grid 网格布局中,引入了一种新的长度单位 fr(fraction)。它表示 Grid 布局中中剩余空间(leftover space)的一部分(fraction)。

一般来说 1fr 的意思是"100%的剩余空间", .25fr 意味着"25%的剩余空间"。当 fr数值总和 大于 1 的时候,则会按照计算比例来分配。

  • 用法
  1. 均分剩余空间

首先我们先建立如下的网格布局

css 复制代码
<div class="grid-container">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
</div>

然后将 ABCD 四块进行均分,我们可以用 grid-template-columns: repeat(4, 1fr) 这里的和 grid-template-columns: repeat(4, .25fr) 效果是一样的。.25 来自于 100%/4=25%

非常建议使用 fr>=1 的方式, 比如说 1fr 2fr 就比 .33fr .67fr 可读性更强。

实现效果如下:

css 复制代码
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
}

2. 和其他单位混合使用

在 grid 布局中,有时候我们需要固定某些列的长度,可以用以下方法,这里 AD 都是固定的 50pxC 是占总宽度的 40%,剩余空间就可以分配给 B

这种情况,在设计响应式布局的时候非常有用。

css 复制代码
.grid-container {
  grid-template-columns: 50px 1fr 40% 50px;
  column-gap: 10px;
}

好文章:grid

相关推荐
EricWang13588 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning8 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人18 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂40 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
deephub2 小时前
Tokenformer:基于参数标记化的高效可扩展Transformer架构
人工智能·python·深度学习·架构·transformer