A 4 X 3 Grid Gone Awry

HTML-CSS
1

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>
2

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

3

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.

4

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