CODEWITHSUNDEEP
csscss-grid
Ryan
Ryan

Reputation: 1242

CSS grid layout, 2 items sharing 3 rows?

enter image description here

I want the vertical space for the 4 and 5 blocks to be shared exactly 50%.

I currently have the code configured like:

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "side1 main1"
    "side2 main1"
    "side3 main2";

Is it possible to somehow have the main1/main2 to share the space each as 50%?

Upvotes: 0

Views: 1157

Answers (1)

A Haworth
A Haworth

Reputation: 36664

If you think of it as a grid with 6 rows then side elements can take 2 rows each height and main elements can take 3 rows each height.

* {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-areas: "side1 main1" "side1 main1" "side2 main1" "side2 main2" "side3 main2" "side3 main2";
  width: 50vmin;
  /* added just for demo */
  aspect-ratio: 2 / 3;
  gap: 1vmin;
}

.grid>div {
  background: red;
  font-size: 40px;
}

.grid>div:nth-child(1) {
  grid-area: side1;
}

.grid :nth-child(2) {
  grid-area: side2;
}

.grid :nth-child(3) {
  grid-area: side3;
}

.grid :nth-child(4) {
  grid-area: main1;
}

.grid :nth-child(5) {
  grid-area: main2;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

And as you want the side elements to be squares you can set the overall aspect ratio 2 / 3 and drop the 1fr row and column settings.

Upvotes: 2

Related Questions