0

I have the following CSS, which has five grid areas (one area surrounded by four others). Each grid area is 200x200 pixels.

The text aligns centrally in its grid area but the image (in .area1) stays top left (the image is 150x150, so there should be scope for it being centered).

Does anybody know what I am doing wrong.

Below is the CSS and the HTML.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Area Test</title>
<link rel="stylesheet" type="text/css" href="style.css">    
</head>

<body>

    <img class="area1" src="https://source.unsplash.com/150x150">
    <p class="area2">Area 2</p>
    <p class="area3">Area 3</p>
    <p class="area4">Area 4</p>
    <p class="area5">Area 5</p>

</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    background: #9A9696;
}

body {
    display: grid;
    grid-template-columns: repeat(6, 100px);
    grid-template-rows: repeat(6, 100px);
    grid-template-areas: 
        "area1 area1 ..... ..... area2 area2"
        "area1 area1 ..... ..... area2 area2"
        "..... ..... area3 area3 ..... ....."
        "..... ..... area3 area3 ..... ....."
        "area4 area4 ..... ..... area5 area5"
        "area4 area4 ..... ..... area5 area5";
    justify-content: center;
}

.area1, .area2, .area3, .area4, .area5 {
    background: #DE6449;
    display: grid;
    align-items: center;
    justify-content: center;
}

.area1 {grid-area: area1;}
.area2 {grid-area: area2;}
.area3 {grid-area: area3;}
.area4 {grid-area: area4;}
.area5 {grid-area: area5;}
.area6 {grid-area: area6;}
Graham
  • 129
  • 1
  • 8

1 Answers1

2

Quick answer: use margin: auto

.area1 {
  grid-area: area1;
  margin: auto;
}

Detailed answer: Centering in CSS Grid

Kronosfear
  • 79
  • 4
  • Thank you - it is not clear from the "other" answer (but I accept that it is in there somewhere), but the response above worked. Thank you. – Graham Oct 28 '19 at 22:57