时间戳

首页 > 解决方案 > 如何使 CSS 网格对其中的变化元素无响应？

html - 如何使 CSS 网格对其中的变化元素无响应？

问题描述

我有一个像这样的基本网格。我怎样才能让它对里面的变化元素没有反应？示例：如果我将按钮之类的元素放入其中并且文本发生更改（例如从“未准备好”变为“准备好”），则整个容器的大小应该保持不变。但我真的找不到任何方法来实现这一目标。还是我使用了错误的技术？

<div class="container">
  <div class="header"></div>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

<style>
  .container {
    display: grid; 
    grid-template-columns: 1fr 0.7fr 1.3fr; 
    grid-template-rows: 0.2fr 0.6fr 1.6fr; 
    gap: 0px 0px; 
    grid-template-areas: 
      "header header header"
      "one one two"
      "one one three"; 
  }
  .header { grid-area: header; }
  .one { grid-area: one; }
  .two { grid-area: two; }
  .three { grid-area: three; }
</style>

标签： htmlcsscss-grid

解决方案

使用百分比而不是fr列上的灵活长度，例如grid-template-columns: 30% 30% 40%;

试试下面的代码片段

.container {
  display: grid; 
  grid-template-columns: 30% 30% 40%; 
  grid-template-rows: 0.2fr 0.6fr 1.6fr; 
  gap: 0px 0px; 
  height:100vh;
  border:1px solid black;
  grid-template-areas: 
    "header header header"
    "one one two"
    "one one three"; 
}
.header { grid-area: header; border:1px solid blue; }
.one { grid-area: one; border:1px solid blue;}
.two { grid-area: two; border:1px solid blue;}
.three { grid-area: three; border:1px solid blue;}
<div class="container">
  <div class="header"></div>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"><button>way waaay more than ready</button></div>
</div>

推荐阅读