CODEWITHSUNDEEP
htmlcsscss-grid
Marvin3
Marvin3

Reputation: 6041

Equal height different aspect ratio boxes with CSS grid

I'm trying to create layout like this:

enter image description here

Is there a way to create such layout via CSS grid? I know that I can wrap orange items in a separate column element, but I'd like to avoid this. I also managed to create this layout when aspect ratio of each item is square, but no luck with this one...

Example on jsfiddle http://jsfiddle.net/fq974gov/

 .grid {
  display: grid;
  grid-gap: 10px;
  width: 200px;
}
.item-left {
  background: lightblue;
  padding-bottom: 120%;
}
.item-right {
  background: tomato;
  padding-bottom: 60%;
}
<div class="grid">
  <div class="item-left"></div>
  <div class="item-right"></div>
  <div class="item-right"></div>
  <div class="item-right"></div>
</div>

Upvotes: 5

Views: 1419

Answers (3)

Sadjad Ghanbarynasab
Sadjad Ghanbarynasab

Reputation: 93

At first, I suggest you to read more about grid layout. This link may help you. And let's solve your problem. Every div item in your case is a grid item. So you should give them different styles. At first You should set grid-template-columns and grid-template-rows for container. After that for items, you should set grid-column-start, grid-column-end, grid-row-start, grid-row-end. Look at the above link about grid layout and try to solve it, This is my solution that may help you. https://jsfiddle.net/sghgh1996/0cf39bm1/

HTML:

 <div class="grid">
  <div class="item-left">
  </div>
  <div class="item-right row1">
  </div>
  <div class="item-right row2">
  </div>
  <div class="item-right row3">
  </div>
</div>

CSS:

.grid {
  display: grid;
  grid-gap: 10px;
  width: 200px;
  grid-template-columns: 50% 50%;
  grid-template-rows: 33.333% 33.333% 33.333%;
}
.item-left {
  background: lightblue;
  padding-bottom: 120%;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 6;
}
.item-right {
  background: tomato;
  padding-bottom: 60%;
}
.row1{
  grid-row-start: 1;
  grid-row-end: 2;
}
.row2{
  grid-row-start: 3;
  grid-row-end: 4;
}
.row3{
  grid-row-start: 5;
  grid-row-end: 6;
}

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272723

You can define template areas and control the ratio using grid-template-columns

.grid {
  display: grid;
  grid-template-areas:
    "l1 r1"
    "l1 r2"
    "l1 r3";
  grid-template-columns:3fr 2fr; /*adjust this as you like*/
  grid-gap: 10px;
  width: 200px;
  animation:change 2s infinite alternate linear;
}
.item-left {
  grid-area:l1;
  background: lightblue;
  /*padding-bottom: 120%; no more needed*/
}
.item-right {
  background: tomato;
  padding-bottom: 60%;
}
.item-right:nth-child(2) {
  grid-area:r1;
}
.item-right:nth-child(3) {
  grid-area:r2;
}
.item-right:nth-child(4) {
  grid-area:r3;
}

@keyframes change{
  to{width:300px;}
}
<div class="grid">
  <div class="item-left"></div>
  <div class="item-right"></div>
  <div class="item-right"></div>
  <div class="item-right"></div>
</div>

The code can be simplified like this:

.grid {
  display: grid;
  grid-template-areas:
    "l r"
    "l r"
    "l r";
  grid-template-columns:3fr 2fr; /*adjust this as you like*/
  grid-gap: 10px;
  width: 200px;
  animation:change 2s infinite alternate linear;
}
.item-left {
  grid-area:l;
  background: lightblue;
}
.item-right {
  background: tomato;
  padding-bottom: 60%;
}
@keyframes change{
  to{width:300px;}
}
<div class="grid">
  <div class="item-left"></div>
  <div class="item-right"></div>
  <div class="item-right"></div>
  <div class="item-right"></div>
</div>

Upvotes: 4

Tejas J
Tejas J

Reputation: 31

This is working code for it. Check it out on JSFiddle

<html>
<head>
    <title>Grid View</title>
</head>

<style>
.grid {
  display: grid;
  grid-gap: 10px;
  width: 500px;
  grid-template-areas: 
    "a a b b"
    "a a c c"
    "a a d d"
  ;
}
.item-left {
  background: lightblue;
  padding-bottom: 120%;
  grid-area: a;
}
.item-right {
  background: tomato;
  padding-bottom: 40%;
}
#grid_b {
  grid-area: b;
}

#grid_c {
  grid-area: c;
}

#grid_d {
  grid-area: d;
}
</style>

<body>

<div class="grid">
  <div id="grid_a" class="item-left"></div>
  <div id="grid_b" class="item-right"></div>
  <div id="grid_c" class="item-right"></div>
  <div id="grid_d" class="item-right"></div>
</div>
</body>
</html>

Upvotes: 2

Related Questions