CSS Layout 问题

[gnosis23]

Flex

情况一

怎么解决最后一行的问题...

[gnosis23]

Grid Layout

grid-template-columns

grid-template-columns 可以设定固定的值，也可以设置百分比

// 横向 2 个 200px
grid-template-columns: 200px 200px;

用下面这段代码可以解决上面的问题：repeat表示重复，而 auto-fill 值表示能撑满容器的最大个数。

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 220px); 
  grid-gap: 1rem; 
  justify-content: space-between; 
}