Grid

by Aikepaer Abuduweili

HTML

<div class="container">
  <div class="item-a">123</div>
  <div class="item-b">456</div>
</div>

CSS

.container {
    display: grid;
    width: 150px;
    grid-template-columns: 60px 60px;
    grid-template-rows: 60px 60px;
    /* grid-auto-columns: 60px; */
    border:solid 1px #ccc;
    grid-auto-columns: 160px;
}
.item-a {
    background:#0cc;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.item-b { 
    /* 容器水平只有2个格子，但这里设定的是第3个，隐式网格创建 */
    grid-column: 3 / 4;
    grid-row: 2 / 3; 
    background-color: rgba(255,255,0, .5);
}