grid-gap弃用
时间: 2023-09-22 22:10:33 浏览: 74
在Grid布局规范中,grid-gap属性已经被弃用。尽管Grid布局仍然支持grid-gap属性,但标准已经更新为使用gap、row-gap和column-gap属性来定义间隙。当容器在行方向时,column-gap属性不会在列方向上起作用。此时,我们可以尝试使用row-gap属性或直接使用gap属性来定义间隙。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [CSS布局---运用间隙](https://blog.csdn.net/qq_40619809/article/details/131651749)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
相关问题
windicss grid grid-gap 使用案例
以下是一个使用 Windi CSS 的 Grid 和 Grid Gap 的简单示例:
```html
<div class="grid grid-cols-3 grid-gap-4">
<div class="bg-gray-100 p-4">1</div>
<div class="bg-gray-200 p-4">2</div>
<div class="bg-gray-300 p-4">3</div>
<div class="bg-gray-400 p-4">4</div>
<div class="bg-gray-500 p-4">5</div>
<div class="bg-gray-600 p-4">6</div>
</div>
```
在上面的示例中,我们使用 `grid-cols-3` 类指定网格列数为 3,使用 `grid-gap-4` 类指定网格间距为 4。然后,我们在 `div` 元素中使用 Windi CSS 的背景颜色和内边距类来创建网格项。
该示例将创建一个包含 6 个网格项的 3 列网格,每个网格项之间有 4 像素的间距。
windicss grid grid-gap grid-rows 使用案例
以下是一个使用 Windi CSS 的网格布局的示例:
```html
<div class="grid grid-cols-3 grid-rows-3 grid-gap-4">
<div class="bg-red-500 text-white text-center py-4">1</div>
<div class="bg-blue-500 text-white text-center py-4">2</div>
<div class="bg-green-500 text-white text-center py-4">3</div>
<div class="bg-yellow-500 text-white text-center py-4">4</div>
<div class="bg-purple-500 text-white text-center py-4">5</div>
<div class="bg-indigo-500 text-white text-center py-4">6</div>
<div class="bg-pink-500 text-white text-center py-4">7</div>
<div class="bg-gray-500 text-white text-center py-4">8</div>
<div class="bg-orange-500 text-white text-center py-4">9</div>
</div>
```
在这个例子中,我们创建了一个3x3的网格布局通过使用 `grid-cols-3` 和 `grid-rows-3` 类。我们还使用了 `grid-gap-4` 类来指定行和列之间的间距。每个单元格都有一个背景颜色和一个白色的文本标签,以便更清楚地显示网格结构。
这里是这个例子的效果图:
![Windi CSS Grid Example](https://i.imgur.com/6vYzK1z.png)
你可以在 Windi CSS 的文档中找到更多关于使用网格布局的信息:https://windicss.org/utilities/layout.html#grid-templates
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)