如何让CSS网格内的每个单元格严格相等

Question

我需要制作 4x2 网格，并使其中的每个单元格的高度和宽度相等，到目前为止，我已经取得了一些成功，但无论我做什么，当我放入稍大的子元素时，单元格都会拉伸。

我需要使用“grid-template-areas”制作网格容器，因为它是动态的。

这是网格容器的代码：

export const WidgetsGrid = styled.div' 
width: 100%; 
height: 100%; 
display: grid; 
gap: 1rem; 
grid-auto-rows: 1fr; 
grid-auto-columns: 1fr;

这是我如何设置它的

grid-template-areas

<WidgetsGrid style={{ gridTemplateAreas }} >

我尝试编辑多个网格属性，但行为仍然相同，它总是拉伸以适合元素

Answer 1

我希望这个片段能够说明问题。大图像会拉伸它所在的列，导致列的宽度不相等。

body {
  margin: 1em;
}

.d1 {
  display: grid; 
  gap: 1em; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: repeat(2, 1fr); 
}

.d1 > * {
  background: cyan;
}

<div class="d1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>
    6
    <br><br>
    <img src="https://picsum.photos/id/1000/500/100">
  </div>
  <div>
    7
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam.
  </div>
  <div>8</div>
</div>

将

1fr

替换为

minmax(0, 1fr)

将强制各列宽度相等。

body {
  margin: 1em;
}

.d1 {
  display: grid; 
  gap: 1em; 
  grid-template-columns: repeat(4, minmax(0, 1fr)); 
  grid-template-rows: repeat(2, 1fr); 
}

.d1 > * {
  background: cyan;
}

<div class="d1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>
    6
    <br><br>
    <img src="https://picsum.photos/id/1000/500/100">
  </div>
  <div>
    7
    <br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam.
  </div>
  <div>8</div>
</div>