My grid-template-columns currently has 4 columns, but I want it to have only 1 column on mobile devices.
This is my CSS setup:
<div style={{ padding: 16 }}>
<div className={styles.cardContainer}>
{data.map((value, index) => <div key={index} className={styles.card} />)}
</div>
</div>
CSS:
.cardContainer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(364px, 1fr));
gap: 2rem;
width: 100%;
background-color: pink;
@media (min-width: 1200px) {
grid-template-columns: repeat(4, 1fr);
}
}
.card {
min-height: 522px;
box-sizing: border-box;
border: 1px solid $color-neutral-30;
background-color: $color-neutral-10;
border-radius: 24px;
padding: 16px;
width: 100%;
}
It's functioning properly on desktop, but there is a padding-right issue on certain mobile devices.
https://i.sstatic.net/cw4Mw.png
The padding-right should be 16px, how can this issue be resolved?