grid 布局基础

页面布局如下

使用 tailwindcss 写的页面结构如下:

<template>
  <div class="size-[300px] border border-black">
    <div class="size-[50px] bg-red-700"></div>
    <div class="size-[100px] bg-blue-700"></div>
  </div>
</template>

1. grid 设置后, 内容结构发生了变化

除去它们自身的高度，剩下的高度，它们均等分，即为 (300-50-100)/2=75, 也就是图中红色长条

而列方向布局(grid-auto-flow: column)也是一样的效果。

2. 相对于单元格内容的布局

2.1 justify-items 水平方向

justify-items: start | center| end, 水平方向 '左'、'中'、'右'。

1.justify-items-start 左

2.justify-items-center 中

3.justify-items-end 右

2.2 align-items 垂直方向

align-items: flex-start | flex-end | center, 垂直方向 '上'、'中'、'下'。

1.items-start 上

2.items-center 中

3.items-end 下

3. 把内容当作整体进行布局

3.1 justify-content '水平方向' 整体布局

justify-content: flex-start | center | flex-end, 水平方向 '左'、'中'、'右'。

TIP

justify-between 不起作用。因为这种情况它只有 1 列。

1.justify-start 整体 左

2.justify-center 整体 中

3.justify-end 整体 右

3.2 align-content '垂直方向' 整体布局

align-content: start | center | end | space-between 垂直方向 '上'、'中'、'下'、'两端对齐'布局

1.content-start 整体 上

2.content-center 整体 中

3.content-end 整体 下

4.content-between 两端对齐

4. 设置列方向布局

设置列方向布局 grid-auto-flow: column

4.1 相对于单元格 '水平方向' 布局

1.justify-items-start

2.justify-items-center

3.justify-items-end

4.2 相对于单元格 '垂直方向' 布局

1.items-start

2.items-center

3.items-end

4.3 内容当作整体, '水平方向' 布局

1.justify-start

2.justify-center

3.justify-end

4.justify-between

4.4 内容当作整体, '垂直方向' 布局

1.content-start

TIP

content-between 不起作用。因为这种情况它只有 1 行。

2.content-center

3.content-end

5 如何让内容水平和垂直居中

1.整体垂直居中-1

综上所诉, 应该把它们当作一个整体进行布局, 所以设置 justify-center 和 content-center, 或者 place-content-center

2. 整体垂直居中-2

红色方块相对于蓝色水平居中

1.设置父元素place-content-center, 设置红色方块 justify-self-center

2.设置父元素 content-center justify-items-center