Why i can't use justify-content property with grid?-CodePudding

I want to align image right like banner. But when i use grid and justify-content:end, images align row. I watched chrome inspector, it said use flex. Why grid can't use justify-content?

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
    <style>
   .icon{
            height: 30px;
            width: 30px;
            
        }
        #iconbanner{
            display:grid;
            background-color:gray;
            justify-content: end;
        }
    </style>
    </head>

    <body style="margin:0;">
        <div id="iconbanner">
        <img src="blog.png" ><img src="youtube.png" ><img src="instagram.png" >
    </div>
    </body>

</html>

I tried grid and justify-contet:end; but cant' align images column.

CodePudding user response：

You can do it like this (I added a gap between images) :

<html>

<head>
  <title>page</title>
  <style>
    .icon {
  height: 30px;
  width: 30px;
}

#iconbanner {
  display: grid;
  gap: 5px;
  background-color: gray;
  grid-template-columns: repeat(3, auto);
  justify-content: end;
}

  </style>
</head>

<body style="margin:0;">
  <div id="iconbanner">
    <img src="blog.png" ><img src="youtube.png" ><img src="instagram.png" >
  </div>
</body>

</html>

CodePudding user response：

In a grid, use justify-items instead of justify-content.