网格轨道的对齐方式测试1
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>42度空间-网格布局之网格轨道的对齐方式测试1</title> <style> .grid { display: grid; width: 100%; height: 300px; grid-template-columns: repeat(4, 45px); grid-template-rows: repeat(4, 45px); grid-gap: 1em; justify-content: start; border: 1px solid #ccc; } .item { display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: .2rem; font-size: .8em; padding: .75rem; color: #f0f0f3; background-color: #e91e63; } body { font-family: -apple-system,BlinkMacSystemFont,SFNSDisplay-Regular,Roboto,Helvetica,Arial,sans-serif; line-height: 1.15; } </style> </head> <body> <div class="grid"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> <div class="item">12</div> <div class="item">13</div > <div class="item">14</div > <div class="item">15</div > <div class="item">16</div > </div> </body> </html>
运行结果
三十课