17.带侧边栏的响应式布局 & 漂亮的文本下划线

文章预览

带侧边栏的响应式布局 创建一个带有内容区和侧边栏的响应式布局。 在父容器上使用 display: grid ,创建一个网格布局。 对第二列(侧边栏)使用 minmax() ,允许它占据 150px 到 20% 之间的空间。 对第一列(主要内容)使用 1fr ,占据剩余的空间。 < div   class = "container" >   < main >    这个元素占据 1fr 的空间。   main >   < aside >    最小: 150px / 最大: 20%   aside > div > .container  {   display : grid;   grid-template-columns :  1 fr  minmax ( 150px ,  20% );   height :  100px ; } main ,  aside  {   padding :  12px ;   text-align : center; } main  {   background :  #d4f2c4 ; } aside  {   background :  #81cfd9 ; } ………………………………