css 3x3网格不应该这么难[重复]

31moq8wy 于 12个月前发布在其他

关注(0)|答案(3)|浏览(99)

此问题在此处已有答案：

Why doesnt percentage height work in HTML/CSS?（7个答案）
Equal height rows in CSS Grid Layout（2个答案）
How do I specify row heights in CSS Grid layout?（4个回答）
5天前关闭。
不像预期的那样：

.cont {
    display: grid;
    grid-template-rows: 33% 33% 33%;
    grid-template-columns: 33% 33% 33%;
}
.cont > div {
    outline: 1px solid red;
}

个字符
所以很明显，预期的结果将是一个井字格一样的网格相等的正方形。然而，高度与每个div的内容相同，我有9个。我尝试了在容器div和单个div中设置高度为100%的一切，它总是不考虑内容。问题是不同的正方形将是空的或在不同的时间有内容。如果我在行上设置特定的高度，250px它工作正常，但它不会与百分比的某些原因工作。我只是想9个相等的正方形，无论浏览器的高度和宽度在px。你会认为这不会那么困难。

css

来源：https://stackoverflow.com/questions/77747776/3x3-grid-should-not-be-so-difficult

3条答案

按热度按时间

r7s23pms1#

为了填满屏幕（而不是超过它），列/行的最大大小是视口高度的1/3。
因此，我们将列宽度设置为33.33vh（viewport高度的1/3），并在子列上使用aspect-ratio以确保它们保持方形。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.cont {
  display: grid;
  grid-template-columns: repeat(3, 33.3vh);
}

.square {
  aspect-ratio: 1 /1;
  outline: 1px solid green;
}

个字符

赞(0）回复(0）举报 12个月前

axkjgtzd2#

像下面这样做：

.cont {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  width: 100vmin; /* 100% of the smallest between height and width of screen */
  aspect-ratio: 1; /* square */
  gap: 5px; /* you can also have gap*/
}

.cont > div {
  border: 1px solid red;
}

body {
  margin: 0;
  /* center everything */
  height: 100vh;
  display: grid;
  place-content: center;
}

个字符

赞(0）回复(0）举报 12个月前

jm81lzqq3#

如果你想让容器填充高度，我会使用height: 100vh，这样div就会是viewport的高度。
为了演示的目的，我在容器中添加了子元素。网格子元素将自动填充其网格单元格。
此外，如果您希望列和行均匀分布，可以使用repeat()，它将设置列/行的数量以及每个列/行的大小。
你可以阅读更多关于repeat()here.
阅读更多关于vh测量单位here的信息。

html, body {
padding: 0;
margin: 0;
}

.cont {
  background-color: #171717;
  height: 100vh;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.25rem;
}

.testing-box {
  background-color: white;
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

css 3x3网格不应该这么难[重复]

3条答案

相关问题

热门标签

最新问答