display:grid

grid-template-columns:repeat(10,1fr)

width: 100%;
height: 300px;
border: 1px solid aqua;
display: grid;
grid-template-columns: repeat(10, 1fr);

repeat(10,1fr)具体在一行展示10个,并且子元素宽度平分整个宽度.

grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))

width: 100%;
height: 300px;
border: 1px solid aqua;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

repeat(auto-fill, minmax(200px, 1fr))表示子内容最小宽度200px,子内容数量随屏幕宽度变化产生变化.

grid-column-start;grid-column-end;grid-row-start;grid-row-end

.item-1 {
  background-color: #ef342a;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

多种写法

#garden {
  height: 500px;
  display: grid;
  grid-template-rows: 200px 100px;
  grid-template-columns: repeat(4, 1fr);
}