网格grid布局

grid布局点

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

grid

display: grid

grid-template

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

图示如下:
网格grid布局

grid-template-rows

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

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

grid-template-columns

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

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

  • 语法
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”
.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布局

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. 均分剩余空间

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

<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 可读性更强。

实现效果如下:

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

网格grid布局

2. 和其他单位混合使用

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

.grid-container {
  grid-template-columns: 50px 1fr 40% 50px;
  column-gap: 10px;
}

网格grid布局

好文章:grid

原文链接:https://juejin.cn/post/7341783797329526818 作者:我是大龄程序员

(0)
上一篇 2024年3月4日 上午10:27
下一篇 2024年3月4日 上午10:38

相关推荐

发表回复

登录后才能评论