我用grid
和css
,如果数组数是一、二或三,我需要确保元素在中心.
<div className={styles.testWrap}>
<div className={styles.testGrid}>
{array.map((value, index) => {
return (
<div className={styles.logoBox} key={index}>
<div
onClick={() => router.push({ pathname: `./brand/${brand.id}` })}
className={styles.logoContainer}
>
<NextImage src={brand.logoUrl} width={180} height={180} alt="pic" />
</div>
</div>
);
})}
</div>
CSS
.testWrap {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: pink;
.testGrid {
display: grid;
width: 100%;
gap: 24px;
justify-content: center;
margin-bottom: 130px;
@include sm {
width: fit-content;
margin: 0 auto;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
margin-bottom: 197px;
}
@include md {
// grid-template-columns: auto auto auto; if array number is three
// grid-template-columns: auto auto; if array number is two
// grid-template-columns: auto; if array number is one
grid-template-columns: params; // How do I get dynamic params over here ?
justify-content: center;
grid-gap: 55px;
width: 100%;
margin-bottom: 195px;
}
}
}