Grid实战案例分享
演示地址
我的相册：https://php520.vip/4.14/demo3.html
十二列栅格布局组件：https://php520.vip/4.14/demo1.html
1.我的相册
- 使用grid布局，自动填充到生成的单元格中
- auto-fill:将项目全部填充到容器中
- auto-fit:忽略空的项目
- 代码实例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>网络相册</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}a {text-decoration: none;color: #555;}a:hover {color: coral;}body {background-color: lightseagreen;}h1 {color: #fff;text-align: center;letter-spacing: 5px;font-weight: normal;font-size: 2.5rem;text-shadow: 2px 2px 2px #555;margin-top: 20px;}.container {min-width: 100vw;min-height: 100vh;padding: 50px;display: grid;/* 自动填充到生成的单元格中 *//* auto-fill:将项目全部填充到容器中 *//* auto-fit:忽略空的项目 */grid-template-columns: repeat(auto-fill, 250px);grid-template-rows: repeat(auto-fill, 280px);justify-content: space-evenly;align-content: space-evenly;gap: 25px;}.container img {width: 100%;text-align: center;}.container > .item {padding: 10px;background-color: #fff;border-radius: 10px;display: flex;flex-flow: column nowrap;align-items: center;justify-content: center;}.container > .item:hover {box-shadow: 0 0 10px #555;width: calc(100% * 1.02);background-color: lemonchiffon;}</style></head><body><h1>我的相册</h1><div class="container"><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女1</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女2</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女3</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女4</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女5</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女6</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女7</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女8</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女9</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女10</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女11</a></div><div class="item"><!-- 图片 --><a href=""><img src="static/images/girl.jpg" alt="" /></a><!-- 文本 --><a href="">中国美女12</a></div></div></body></html>
2.十二列栅格布局组件
- 直接上代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="static/css/style.css" /><title>模拟12列栅格布局</title></head><body><div class="container"><!-- 第一步：创建一个行 --><div class="row"><!-- 第二步：划分列 --><span class="item col-6">6</span><span class="item col-6">6</span></div><div class="row"><!-- 三等分 --><span class="item col-4">4</span><span class="item col-4">4</span><span class="item col-4">4</span></div><!-- 三列 --><div class="row"><span class="item col-2">2</span><span class="item col-8">8</span><span class="item col-2">2</span></div><div class="row"><span class="item col-2">2</span><span class="item col-8">8</span></div><div class="row"><span class="item col-1">1</span><span class="item col-1">2</span><span class="item col-1">3</span><span class="item col-1">4</span><span class="item col-1">5</span><span class="item col-1">6</span><span class="item col-1">7</span><span class="item col-1">8</span><span class="item col-1">9</span><span class="item col-1">10</span><span class="item col-1">11</span><span class="item col-1">12</span></div></div></body></html>
- 效果图
