CSS grid间隔属性gap的实例
七娃博客369人阅读
grid-row-gap:10px;grid-column-gap:20px;
等价于下面代码:
grid-gap:10px 20px;
等价于:
gap:10px 20px;
html代码
<style> .grid{ line-height: 100px; text-align: center; display: grid; grid-template-columns:100px 100px 100px; grid-template-rows:100px 100px 10px; gap:10px 20px; } .item{ color: #fff; font-size: 16px; } .bg01{background: #0057C4;} .bg02{background: #000000;} .bg03{background: #008000;} </style> <div class="grid"> <div class="item bg01">1</div> <div class="item bg02">2</div> <div class="item bg03">3</div> <div class="item bg03">4</div> <div class="item bg01">5</div> <div class="item bg02">6</div> </div>