使用grid网格布局实现三列布局,和之前所讲的gird实现双列布局是同样的思想,只是把列数变为了3,高度依然不设置,通过容器项的内容高度自适应撑开整体高度。 现在给类名为"container"的盒子添加"display: grid"属性,使该盒子成为网格布局容器。再给该容器添加"grid-template-columns: 100px auto 100px"属性,表示该容器一共有3列,且宽度分别为100px、自适应、100px。不需要设置行属性,当有多个元素时容器会自适应的往下顺次排列。此时观察容器的高度,是根据容器项中高度最高的那一项决定的,也不会产生台阶式效果。 进入下一节的学习吧。
加载中...