时间戳

首页 > 解决方案 > CSS Grid - 我们可以根据行调整间隙吗？

html - CSS Grid - 我们可以根据行调整间隙吗？

问题描述

我正在尝试重现蒙德里安的画作。

.wrapper {
  width: 600px;
  height: 600px;
  background: url(painting.png) no-repeat;
    display: grid;
    grid-gap: 40px 20px;
    grid-template-rows: 178px 219px 61px 63px;
    grid-template-columns: 128px 392px 44px;
 
}
div {
    border: 1px solid black;
    background-color: white;
    opacity: 0.5;
}
.a {
    grid-row: 1/2;
    grid-column: 1/2;

}
.b {
    grid-row: 2/3;
    grid-column: 1/2;
}
.c {
    grid-row: 1/3;
    grid-column: 2/4;
}
.d {
    grid-row: 3/5;
    grid-column: 1/2;
}
.e {
  grid-row: 3/5;
    grid-column: 2/3;   
}
.f {
    grid-row: 3/4;
    grid-column: 3/4;
 }
<body>
    <div class="wrapper">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
        <div class="d">d</div>
        <div class="e">e</div>
        <div class="f">f</div>
        <div class="g">g</div>
    </div>
</body>

我几乎用布局把它钉牢了。问题是行之间有不同的间隙值。所以一个是例如 24px 和其他 40px。有没有办法可以在不同行的间隙上应用不同的值。或者我应该对现有的这个感到满意。谢谢！

标签： htmlcsslayoutcss-grid

解决方案

一个网格中不能有多个间隙大小。

一种解决方法是使用最小尺寸的网格间隙，并在需要时用边距补充它：

.wrapper {
  width: 600px;
  height: 600px;
  background: url(painting.png) no-repeat;
  display: grid;
  grid-gap: 20px 20px;
  grid-template-rows: 178px 219px 61px 63px;
  grid-template-columns: 128px 392px 44px;
}

div {
  border: 1px solid black;
  background-color: blue;
  opacity: 0.5;
}

.a {
  grid-row: 1/2;
  grid-column: 1/2;
  margin-bottom: 20px;
}

.b {
  grid-row: 2/3;
  grid-column: 1/2;
}

.c {
  grid-row: 1/3;
  grid-column: 2/4;
}

.d {
  grid-row: 3/5;
  grid-column: 1/2;
}

.e {
  grid-row: 3/5;
  grid-column: 2/3;
}

.f {
  grid-row: 3/4;
  grid-column: 3/4;
}
<body>
  <div class="wrapper">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
    <div class="f">f</div>
    <div class="g">g</div>
  </div>
</body>

推荐阅读