2

I have created a grid layout inside a div and am trying to create custom sizing for columns so that the second row's first column should have a width of 2fr. So when I run the page, it should look like this:

enter image description here but right now it sort of looks like this:

enter image description here

How do I fix? 

#images ul{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "blue blue blue blue"
                         "red red blue blue blue";
}
#images li{
    list-style: none;
}
#images img{
    width: 100%;
}
.red{
    grid-area: red;
}
.blue{
    grid-area: blue;
}
<div id="images">
    <ul>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/gmKGJeh.jpg" alt="Blue" class="blue">           </li>
        <li><img src="https://i.imgur.com/jsvrwVj.jpg" alt="Red" class="red">           </li>
    </ul>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Talha Munir
  • 498
  • 1
  • 4
  • 16
  • Also `grid-area` cannot be L-shaped and, even more, the `li` should have the color classes...not the images. – Paulie_D Apr 24 '19 at 15:53
  • you should be clear on how `grid-area` is used... see another wrong usage [here](https://stackoverflow.com/questions/55325139/why-are-my-template-areas-not-stacking-as-i-expect)... and your solution: https://jsfiddle.net/m6eakbdj/ – kukkuz Apr 24 '19 at 16:04
  • One problem identified by @Paulie_D. No tetris-like shapes. The second problem is that string values must have an equal number of columns. – Michael Benjamin Apr 24 '19 at 16:41

0 Answers0