CODEWITHSUNDEEP
htmlcsslayoutcss-grid
Becky Beck
Becky Beck

Reputation: 21

CSS Grid - can we adjust the gap according to rows?

I am trying to recreate a Mondrian painting.

.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>

I pretty much nailed it withe layout. The problem is that between the rows there are different values of gaps. So on one there is e.g. 24px and other 40px. Is there a way a can apply different values on gaps on different rows. Or should I be satisfied with this existing one. Thank you!

Upvotes: 1

Views: 70

Answers (1)

Ori Drori
Ori Drori

Reputation: 191976

You can't have multiple gap sizes in a single grid.

A workaround would be to use the lowest size of gap for the grid, and complement it with margins whenever needed:

.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>

Upvotes: 1

Related Questions