为所有CSS网格行设置固定高度

当我构建100Ideas时，有一个小要求，当元素动态增加时，它不应该影响网格的布局，网格元素的行和列的高度应该是固定的。

之前：

优化后：

代码 超文本标记语言

代码语言：text复制

  <div className='container'>
      <div className='content'>
           <div className='item'/>
           <div className='item'/>
      </div>
  </div>

CSS设置grid-auto-rows就可以解决问题

代码语言：text复制

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 10rem; // this does the trick
  grid-gap: 2% 2%
}

grid rows 布局 优化 css

0 人点赞