CSS 实现将多个卡片分成两列显示

  Card 1  Card 2  Card 3  Card 4  Card 5  Card 6

使���Grid网格布局

.card-container {  display: grid;  grid-template-columns: repeat(2, 1fr);  grid-gap: 10px;}.card {  background-color: #f0f0f0;  padding: 10px;}

（多列则将 repeat(2,1fr) ，2 替换成想显示的列数） 

使用Flex弹性布局 

.card-container {  display: flex;  flex-wrap: wrap;}.card {  width: 50%;  box-sizing: border-box;  padding: 10px;}

使用浮动布局

.card-container {  width: 100%;  overflow: hidden;}.card {  width: 50%;  float: left;  box-sizing: border-box;  padding: 10px;  background-color: #f0f0f0;}