How to achieve this layout using css grid

Question

I have been trying to achieve this layout using CSS only but seems not possible.

Template for this layout.

html,
body {
  margin: 0;
  padding: 0;
  background-color: #202020;
}

.wrapper {
  max-width: 40rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 0.4rem;
}

.wrapper>div {
  grid-column: span 1 / span 1;
  text-align: center;
  height: var(--height);
  background-color: #aaaaaa;
}

.box-1 {
  --height: 6rem;
}

.box-2 {
  --height: 12rem;
}

.box-3 {
  --height: 8rem;
}

.box-4 {
  --height: 12rem;
}

.box-5 {
  --height: 8rem;
}

.box-6 {
  --height: 6rem;
}

.box-7 {
  --height: 6rem;
}

.box-8 {
  --height: 8rem;
}

.box-9 {
  --height: 8rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>grid test</title>
  <link rel="stylesheet" href="/index2.css" />
</head>

<body>
  <div class="wrapper">
    <div class="box-1">1</div>
    <div class="box-2">2</div>
    <div class="box-3">3</div>
    <div class="box-4">4</div>
    <div class="box-5">5</div>
    <div class="box-6">6</div>
    <div class="box-7">7</div>
    <div class="box-8">8</div>
    <div class="box-9">9</div>
  </div>
</body>

</html>

Few things to note:

The height of .box-* is not known (I want to place an image inside the .box) but in above example I have hard-coded height just for demo.
The ordering should be left to right as shown in image.
Try to achieve this using only CSS, I will consider JS as last option.

How to achieve this layout using css grid

0 Answers0