问题

我使用了grid-template-columns来定义4列，希望在移动设备上只显示1列。

以下是我的CSS设置：

<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%;
}

在桌面上运行正常，但在某些移动设备上存在右侧填充的问题。

它应该有16px的右侧填充，如何解决这个问题？

<div style={{ padding: 16 }}>
  <div className={styles.cardContainer}>
    {data.map((value, index) => <div key={index} className={styles.card} />)}
  </div>
</div>

.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%;
}

答案1

得分: 1

.cardContainer {
  display: grid;
  gap: 2rem;
  width: 100%;
  background-color: pink;
}

.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%;
}

@media (min-width: 576px) {
  /* 对于宽度大于等于576px的设备（例如小型移动设备横屏） */
  .cardContainer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  /* 对于宽度大于等于768px的设备（例如平板电脑） */
  .cardContainer {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  /* 对于宽度大于等于992px的设备（例如较大的平板电脑和台式机） */
  .cardContainer {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 根据需要，可以添加更多的媒体查询来适应其他断点 */

注意：
使用这段CSS代码，.cardContainer 在移动设备上将以单列布局显示，随着设备宽度的增加，列数也会增加。媒体查询定义了不同屏幕尺寸下的不同列布局。

根据设计需求调整断点（例如576px、768px、992px）和列数。关键是使用媒体查询来适应不同的屏幕尺寸，并防止移动设备上的填充问题。

#css #html

<details>
<summary>英文:</summary>

.cardContainer {
display: grid;
gap: 2rem;
width: 100%;
background-color: pink;
}

.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%;
}

@media (min-width: 576px) {
/* For devices with a width of 576px or more (e.g., small mobile landscape) */
.cardContainer {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 768px) {
/* For devices with a width of 768px or more (e.g., tablets) */
.cardContainer {
grid-template-columns: repeat(3, 1fr);
}
}

@media (min-width: 992px) {
/* For devices with a width of 992px or more (e.g., larger tablets and desktops) */
.cardContainer {
grid-template-columns: repeat(4, 1fr);
}
}

/* You can add more media queries for other breakpoints as needed */

**Note:**
With this CSS, the .cardContainer will have a single column layout on mobile devices, and the number of columns will increase as the device width increases. The media queries define different column layouts for different screen sizes.

Adjust the breakpoints (e.g., 576px, 768px, 992px) and the number of columns according to your design requirements. The key is to use media queries to adapt the grid layout to different screen sizes and prevent the padding issue on mobile devices.

#css #html

</details>