本文参照的哔哩哔哩博主记的笔记grid网格布局真香,比flex方便太多了,grid-template-columns用法_哔哩哔哩_bilibili
其次该博主自己的详细介绍grid笔记如下:grid网格布局,比flex方便太多了,介绍几种常用的grid布局属性_grid布局,子元素独占一行-CSDN博客
1.原始写法
首先最原始的写法如下!grid+列样式才会有效果
2.固定某列的宽度
其次如果想固定某列的宽度如下:
3.让第二列占两份的宽度
想让第二列占两份的宽度如下:
4.简写
5.常用写法
6.自适应
7.宽度或高度合并![](https://i-blog.csdnimg.cn/direct/57f0552b58594d8b877a9dc1f166ddd2.png)
效果
8.伪类介绍
看博主css伪类和伪元素 一分钟完全掌握_哔哩哔哩_bilibili记的笔记
伪类可以拼接
还可以伪类+伪元素【不支持伪元素链式写法!】
效果
伪类大全
常用