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>