How would I achieve the following using CSS grid

Question

How would I achieve the following using CSS grid:

CSS GRID DESIGN

I have tried the following:

.gridContainer{
    display: grid;
    grid-template-columns: auto auto auto auto auto ;
    grid-template-areas: "Red  Blue ";
    grid-template-rows: auto;
    .Red{
        grid-area: Red;
        max-width: 500px;
    }

    .Blue{
        grid-area: Blue;
        max-width: 250px;
    }
}

But the blue squares just stack one on top of each other. There will be more blue squares added in and they must stack around the red one.

`its JSX not HTML` say it in your question and add the tag `jsx`. `Is it not possible to do this without having the HTML` no. CSS doesn't work like that. — aloisdg, Mar 23 '22 at 13:54
Yes you can. I am a react developer too. You should be able to learn to do it. We need it for [mcve] reason. — aloisdg, Mar 23 '22 at 13:55
@aloisdg Thanx for the reply, ill figure it out and post the solution — Azhar Razak, Mar 23 '22 at 13:55
Thank me later :) [here](https://cssgrid-generator.netlify.app/) — Dhaifallah, Mar 23 '22 at 14:00
My answer as a blog post: https://aloisdg.netlify.app/posts/initial-letter-style-for-a-grid-layout/ (I will share it as an answer if the post is reopen) — aloisdg, Mar 23 '22 at 15:29

score 0 · Answer 1 · answered Mar 23 '22 at 13:53

I extend you code a little bit. Hope it helps:

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  background: black;
}
.parent div { 
  background: blue;  
  text-align:center;
  padding:20px; 
  font-size: 30px;
  font-weight: bold;
}
.parent .div1 {
  background: red;
}

.div1 { grid-area: 1 / 1 / 3 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 4; }
.div3 { grid-area: 1 / 4 / 2 / 5; }
.div4 { grid-area: 1 / 5 / 2 / 6; }
.div5 { grid-area: 2 / 3 / 3 / 4; }
.div6 { grid-area: 2 / 4 / 3 / 5; }
.div7 { grid-area: 2 / 5 / 3 / 6; }
.div8 { grid-area: 3 / 1 / 4 / 2; }
.div9 { grid-area: 3 / 2 / 4 / 3; }
.div10 { grid-area: 3 / 3 / 4 / 4; }
.div11 { grid-area: 3 / 4 / 4 / 5; }
.div12 { grid-area: 3 / 5 / 4 / 6; }

 <div class="parent">
<div class="div1"> 1 </div>
<div class="div2"> 2 </div>
<div class="div3"> 3 </div>
<div class="div4"> 4 </div>
<div class="div5"> 5 </div>
<div class="div6"> 6 </div>
<div class="div7"> 7 </div>
<div class="div8"> 8 </div>
<div class="div9"> 9 </div>
<div class="div10"> 10 </div>
<div class="div11"> 11 </div>
<div class="div12"> 12 </div>
</div>

How would I achieve the following using CSS grid

1 Answers1