CODEWITHSUNDEEP
csscss-grid
Milan Biswakarma
Milan Biswakarma

Reputation: 21

3 column css grid layout - can I have 2nd column height bigger

I have an issue I want 3 column grid layout design, and I want the second column to have slightly bigger height then left/right column. Can this be done with grid? I tried to use grid-area row span method, like span 4 for all column, and span 5 for 2nd column. But this makes it disorder of sequential items as you can see on the screenshot.

If you see in the first example, I have got the correct grid layout. I want bigger height for yellow items/column.

IF I try to do that with second example, the respective item and next item switch their order placing, thats because of height.

Is there a way we can achieve this with CSS grid?

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: fit-content();
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 10px 0;
  font-size: 30px;
  grid-auto-rows: max-content;
}

.grid-container > div:nth-child(3n+2) {
    background-color: yellow;
    grid-area: span 6 / span 4;
}
.grid-container > div:nth-child(3n+1),
.grid-container > div:nth-child(3n+3) {
    background-color: red;
    grid-area: span 6 / span 4;
}

/* Grid 2 ==== */
.grid-container.grid-2 > div:nth-child(3n+2) {
    background-color: yellow;
    grid-area: span 7 / span 4;
}
.grid-container.grid-2 > div:nth-child(3n+1),
.grid-container.grid-2 > div:nth-child(3n+3) {
    background-color: red;
    grid-area: span 6 / span 4;
}
<h1>Grid area test</h1>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2" id="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

<h2>Grid two</h2>
<div class="grid-container grid-2">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

Screenshot of css grid layout example

Upvotes: 0

Views: 14

Answers (0)

Related Questions