A 4 X 3 Grid Gone Awry

What on earth is going on with my code for a grid? I thought that I had made a 4Column X 3Row grid but when I tried to give the cell .imageA the upper 2 cells on the Right of the grid, I find that my
grid-template-columns: fr fr fr fr ;
grid-template-rows: fr fr fr;
aren’t acting as they should.
grid-column: 1 / 4;
grid-row: 1 / 2;
Both above properties only act on the rows. How is that? And there seem to be way more rows in this grid than the 3 I thought I had coded for. What a mystery!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4 Column 3 Row Project With 3 Images</title>
    <style>
     body   {
         box-sizing: border-box;
         width: 800px;
         height: 600px;
         border: 4px solid black;
         display: grid;
         grid-template-columns: fr fr fr fr ;
         grid-template-rows: fr fr fr;
     }
     .imageA    {
         grid-column: 1 / 3;
         grid-row: 1 / 2;
         background-color: rgb(233, 219, 219);
     }
    </style>
</head>
<body>
    <div class="imageA">Image A</div>
    <div class="h2text">H2 Text</div>
    <div class="h1headline">H1 Headline</div>
    <div class="imageB">Image B</div>
    <div class="4links">4 Links</div>
    <div class="imageC">Image C</div>
    
</body>
</html>

you still need to put a number in front of the fr unit

Well live and learn! Of course I would have used 2fr 3fr but I had no idea that you needed 1fr as well! It’s so easy to go astray with the details required. Thanks for pointing out my error.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.