网格grid布局

站长

2024年04月05日 19:34 · 阅读数 7

grid布局点

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

grid

display: grid

grid-template

所简写属性：grid-template-rows、grid-template-columns与grid-template-areas

.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布局

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 的时候，则会按照计算比例来分配。

用法

均分剩余空间

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

<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 布局中，有时候我们需要固定某些列的长度，可以用以下方法，这里 A 和 D 都是固定的 50px，C 是占总宽度的 40%，剩余空间就可以分配给 B。这种情况，在设计响应式布局的时候非常有用。

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

网格grid布局

minmax

minmax的作用是限制项目的大小在某个范围之间,minmax函数的第一个参数就是最小值,第二个参数是最大值. minmax函数可以接收的参数:

1.固定长度值(以px为单位)
2.百分比值 minmax(100px, 66%)
3.弹性值 minmax(66px, 1fr)
3.min-content
4.max-content
5.auto

问题

显示多少列？

应该是列数多的为准。

看如下代码：

.item1 {
    grid-area: myArea;
}

.grid-container {
    display: grid;
    grid-template-areas: 'myArea myArea . . . .';  // 5列
    grid-template-columns: repeat(7, minmax(69px, 1fr)); 7列
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}

.grid-container>div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}

可看到grid-template-areas设置了5列，grid-template-columns设置了7列，应该显示7列

网格grid布局

auto-fit 与 auto-fill 区别

auto-fill 容器宽度范围内，尽可能的fill更多的列（相同固定宽度）
auto-fit 列的宽度（不固定）跟随容器比例展示

好文章：