CODEWITHSUNDEEP
csscss-grid
Miha Šušteršič
Miha Šušteršič

Reputation: 10042

css-grid: having a column with a different number of rows

I have the following layout:

.container {
  width: 630px;
  height: 630px;
  display: grid;
  column-gap: 10px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto auto;
}

.first, .second, .third, .fourth, .fifth, .sixth, .seventh {
  width: 200px;
  height: 200px;
  background-color: pink;
}

.first, .second {
  height: 400px;
}

.fourth {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background-color: yellow;
}

.seventh {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}
<div class='container'>
  <div class='first'>1</div>
  <div class='second'>2</div>
  <div class='third'>3</div>
  <div class='fourth'>4</div>
  <div class='fifth'>5</div>
  <div class='sixth'>6</div>
  <div class='seventh'>7</div>
</div>

I would like the first and second column to have 2 rows, taking 3fr 1fr and the last column to have 3 rows taking up 2fr 1fr 1fr. The end result would be that box number 4 is nested between number 3 and 7 without breaking out of the rectangle that boxes in the first two columns created.

This final positioning should look like this: boxes

Is this possible using css grid, and how do I do it?

Upvotes: 0

Views: 256

Answers (2)

Always Helping
Always Helping

Reputation: 14570

Is this what you wanted.

You can read more about grid-row here

Run snippet to see it working below

.container {
  width: 700px;
  height: 700px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 20px;
}

.first,
.second,
.third,
.fifth,
.sixth,
.seventh {
  background-color: pink;
}

.first,
.second {
  grid-row: 1 / 3;
}

.fourth {
  background-color: yellow;
}
<div class='container'>
  <div class='first'>1</div>
  <div class='second'>2</div>
  <div class='third'>3</div>
  <div class='fourth'>4</div>
  <div class='fifth'>5</div>
  <div class='sixth'>6</div>
  <div class='seventh'>7</div>
</div>

Upvotes: 1

doğukan
doğukan

Reputation: 27381

You can try like below:

.container {
  width: 700px;
  height: 700px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  grid-gap: 20px;
}

.first,
.second,
.third,
.fourth,
.fifth,
.sixth,
.seventh {
  width: 100%;
  height: 100%;
  background-color: pink;
}

.first,
.second {
  grid-row: 1 / 3;
}

.second,
.sixth {
}

.fourth {
  background-color: yellow;
}
<div class='container'>
  <div class='first'>1</div>
  <div class='second'>2</div>
  <div class='third'>3</div>
  <div class='fourth'>4</div>
  <div class='fifth'>5</div>
  <div class='sixth'>6</div>
  <div class='seventh'>7</div>
</div>

Upvotes: 1

Related Questions