<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: grid;
/* grid-template-columns: repeat(3, 1fr); */
grid-template-columns: repeat(3, 200px);
justify-content: space-between;
grid-template-rows: 71px;
grid-auto-rows: 71px;
grid-gap: 20px;
border: 1px solid yellow;
}
.son {
width: 100%;
height: 71px;
border-radius: 4px;
overflow: hidden;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
<div class="son"></div>
</div>
</body>
</html>
&-container {
display: grid;
gap: 16px;
text-align: center;
width: 100%;
height: 360px;
padding: 0 24px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
'main main main main card-2 card-2 card-2 card-3 card-3 card-3'
'main main main main card-4 card-4 card-4 card-5 card-5 card-5';
.card-item-main {
grid-area: main;
background-color: pink;
}
.card-item-2 {
grid-area: card-2;
background-color: gray;
}
.card-item-3 {
grid-area: card-3;
background-color: yellow;
}
.card-item-4 {
grid-area: card-4;
background-color: purple;
}
.card-item-5 {
grid-area: card-5;
background-color: brown;
}
}
.choose-card-list {
padding-top: 32px;
min-height: 50px;
display: grid;
align-items: center;
grid-template-columns: repeat(auto-fit, 226px);
grid-template-rows: 172px;
justify-content: space-between;
grid-auto-columns: 226px;
grid-auto-rows: 172px;
grid-gap: 16px;
}
.choose-card-item {
height: 100%;
width: 100%;
background-color: #666;
}