尺寸尺寸CSS网格容器有问题

发布于 2025-02-06 16:01:39 字数 974 浏览 4 评论 0原文

我是使用网格的新手无论如何，我试图有5个divs的布局。因此，我有基本轮廓，但我试图使该网格占据屏幕宽度的100％，而我对此非常失败。

这是我的HTML：

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>

这是CSS：

.parent {
  display: grid;
  grid-template-columns: repeat(6, 5vw);
  grid-template-rows: repeat(6, 5vw);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  width: 100%;
}

.div1 { 
  grid-area: 1 / 1 / 4 / 4; 
  background-color: green;
}

.div2 { 
  grid-area: 4 / 1 / 7 / 4; 
  background-color: black;
}

.div3 { 
  grid-area: 1 / 4 / 3 / 7; 
  background-color: black;
  float: right;
}

.div4 { 
  grid-area: 3 / 4 / 5 / 7; 
  background-color: black;
  float: right;
}

.div5 { 
  grid-area: 5 / 4 / 7 / 7; 
  background-color: black;
  float: right;
}

任何帮助将不胜感激感谢您的时间＆lt; 3

原文

I'm a newbie at using grid so please, if the question is to stupid, don't judge me so hard lol
Anyway I'm trying to have a layout of 5 divs. so I have the basic outline but I'm trying to make this grid take up 100% of the screen width and I'm very much failing at that.

Here is my html:

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>

And here's css:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 5vw);
  grid-template-rows: repeat(6, 5vw);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  width: 100%;
}

.div1 { 
  grid-area: 1 / 1 / 4 / 4; 
  background-color: green;
}

.div2 { 
  grid-area: 4 / 1 / 7 / 4; 
  background-color: black;
}

.div3 { 
  grid-area: 1 / 4 / 3 / 7; 
  background-color: black;
  float: right;
}

.div4 { 
  grid-area: 3 / 4 / 5 / 7; 
  background-color: black;
  float: right;
}

.div5 { 
  grid-area: 5 / 4 / 7 / 7; 
  background-color: black;
  float: right;
}

Any help would be appreciated
Thanks for your time <3

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沙沙粒小 2025-02-13 16:01:39

您只需更改网格板柱：重复（6，5vw）;到网格板柱：重复（6，1fr）;

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 5vw);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  width: 100%;
}

.div1 {
  grid-area: 1 / 1 / 4 / 4;
  background-color: green;
}

.div2 {
  grid-area: 4 / 1 / 7 / 4;
  background-color: black;
}

.div3 {
  grid-area: 1 / 4 / 3 / 7;
  background-color: black;
}

.div4 {
  grid-area: 3 / 4 / 5 / 7;
  background-color: black;
}

.div5 {
  grid-area: 5 / 4 / 7 / 7;
  background-color: black;
}

<div class="parent">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
      <div class="div5"></div>
    </div>

You only change grid-template-columns: repeat(6, 5vw); to grid-template-columns: repeat(6, 1fr);

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 5vw);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  width: 100%;
}

.div1 {
  grid-area: 1 / 1 / 4 / 4;
  background-color: green;
}

.div2 {
  grid-area: 4 / 1 / 7 / 4;
  background-color: black;
}

.div3 {
  grid-area: 1 / 4 / 3 / 7;
  background-color: black;
}

.div4 {
  grid-area: 3 / 4 / 5 / 7;
  background-color: black;
}

.div5 {
  grid-area: 5 / 4 / 7 / 7;
  background-color: black;
}

<div class="parent">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
      <div class="div5"></div>
    </div>

回复收藏 0 原文

~没有更多了~