时间戳

首页 > 解决方案 > 在 CSS Grid 中自动跨越项目宽度

css - 在 CSS Grid 中自动跨越项目宽度

问题描述

我正在使用 CSS Grid 来显示一些标签。如果标签很大（即它的宽度超过 150 像素），我希望该项目根据需要跨越到更多列。例如，在图像中，我希望红色标签分成两列，以便文本保持在一行中。

是否可以在不向目标元素添加特定类的情况下做类似的事情？我正在通过 React 中的数组进行映射以生成每个 div，因此无法仅向该元素添加类。

在此处输入图像描述

index.js

<div className={styles.container}>                      
  <>                                                  
    {tags.map(tag => {                              
      return <TagBlock tag={tag} />               
    })}                                             
  </>                                                 
</div>

样式.css

.container {                                                              
   margin: 30px auto;                                                      
   width: 90%;                                                           
   display: grid;                                                        
   grid-template-columns: repeat(auto-fill, minmax(150px, auto));        
   grid-gap: 20px;                                                       
}

标签： cssreactjscss-grid

解决方案

不知道仅通过 CSS 实现逐渐增加列宽的方法。需要一个 JS 逻辑来设置“它应该占用多少列”。然后是以下情况之一。

  1. “宽”列的显式样式：
grid-column: span X;

其中 X 是你的元素应该有多少列。

  1. 设置预定义的类（如 Bootstrap：col-1、col-2），然后应用它们。

如果一列可以有任何宽度，那么我建议您使用带有换行的 flexbox。有点儿：

.container {
   margin: 30px auto;
   width: 90%;                                                           
   /*added properties below*/
   display: flex;                                                        
   flex-wrap: wrap;
   align-content: flex-start;
}
/*TagBlock base style that grid generated on its own*/
TagBlock {
  margin: 25px;
  min-height: 120px;
  min-width: 120px;
}

希望，这会有所帮助。

推荐阅读