<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>grid 布局 属性示例</title> <style type="text/css"> * { margin: 0; padding: 0; } .container { display: grid; /*列布局*/ grid-template-columns: 1fr 2fr; /*行布局*/ grid-template-rows: 100% 100%; /*列间距*/ grid-column-gap: 15px; /*行间距*/ grid-row-gap: 15px; /*行轴对齐方式*/ justify-items: stretch; /*列轴对齐方式*/ align-items: stretch; /*网格总大小小于网格容器大小时，网格容器内的网格行轴对齐方式*/ justify-content:center; /*网格总大小小于网格容器大小时，网格容器内的网格列轴对齐方式*/ align-content:center; } .item{ text-align: center; /*沿着行轴对齐grid item 里的内容*/ justify-self:stretch; /*沿着列轴对齐grid item 里的内容*/ align-self: center; } .item-1 { background: #008000; } .item-2 { background: #808080; } .item-3 { background: gold; } .item-4 { background: pink; } .item-5 { background: yellow; } .item-6 { background: #FFD700; } </style> </head> <body> <div class="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5</div> <div class="item item-6">6</div> </div> </body> </html>