自适应响应式网格布局效果
代码语言:html
所属分类:响应式
代码描述:自适应响应式网格布局效果,不同的尺寸显示不同的效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #F5F3F3; } .container { margin: 0 auto; max-width: 1200px; padding: 40px; } .pantone-card { -webkit-box-align: center; align-items: center; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; height: 100%; -webkit-box-pack: center; justify-content: center; } .pantone-card--french-gray { background-color: #CECDCF; } .pantone-card--vanilla-ice { background-color: #F5DADF; } .pantone-card--mischka { background-color: #E2E0E3; } .pantone-card--givry { background-color: #F9DBC6; } .pantone-card--bon-jour { background-color: #EDEBED; } .pantone-card--jagged-ice { background-color: #C3E5E9; } .pantone-card--shadow-green { background-color: #99C4C8; } .pantone-card--conch { background-color: #C0D5CF; } .pantone-card--gray-nurse { background-color: #E2E8DE; } .pantone-card--pampas { background-color: #F2ECE8; } .pantone-card__name { color: #fff; font-size: 18px; margin: 0 auto; } .grid { display: grid; grid-auto-flow: dense; grid-gap: 40px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: repeat(30, 150px); } .grid__item:nth-child(2n) { grid-column: span 2; grid-row: span 2; } </style> </head> <body translate="no"> <div class="container"> <div class="grid"> <div class="grid__item"> <article class="pantone-card pantone-card--french-gray"> <h1 class="pantone-card__name">1</h1> </article> </div> <div class="grid__item"> <article class="pantone-card pantone-card--vanilla-ice"> <h1 class="pantone-card__name">2</h1> </article> </div> <div class="grid__item"> <article class="pantone-card pantone-card--mischka"> <h1 class="pantone-card__name">3</h1> </article> </div> <div class="grid__item"> <article class="pantone-card pantone-card--givry"> <h1 class="pantone-card__name">4</h1> </article> </div> <div class="grid__item"> <article class="pantone-card pantone-card--bon-jour"> <h1 class="pantone-card__name">5</h1> </article> </div> <div class="grid__item"> <article class="pantone-card pantone-card--jagged-ice"> <h1 class="pantone-card__name">6</h1> </article> </div> <div class="grid__item"> <article class="pantone-card pantone-card--shadow-green"> <h1 class="pantone-card__name">7</h1> </article> </div> <div class="grid__item"> <article class="pantone-card pantone-card--conch"> <h1 class="pantone-card__name">8</h1> </article> </div> <div class="grid__item"> <article class="pantone-card pantone-card--grey-nurse"> <h1 class="pantone-card__name">9</h1> </article> </d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0