Question 44457 in Html Question posted in
Some basic documentation can be found here.

HOW TO PUT THESE 3 IMAGES SIDE BY SIDE USING CSS GRID – Html

I cannot figure this out. I would like to put these 3 little images to sit side by side using CSS GRID for practicing purposes. It is like the little image in the left corner can’t align with the other images and I don’t know why because they are in the same column and div.

I even tried to use inline-block in the div called "inline", but It didn’t work.

p {
  font-family: Arial;
  font-weight: bold;
  color: rgb(71, 71, 71);
  font-size: 16px;
}

div {
  margin-top: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  column-gap: 124px;
}

.cat {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.cat2 {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.dog {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.prof-picture {
  width: 29px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  margin-top: 56px;
}
<body>

  <div>
    <div class="image1">
      <img class="cat" src="Exercícios/cat.jpg">
    </div>
    <div class="image2">
      <img class="cat2" src="Exercícios/cat2.jpg">
    </div>
    <div class="image3">
      <img class="dog" src="Exercícios/dog2.jpg">
    </div>
    
    <div class="inline">
      <div class="names">
        <p>Oliver</p>
        <p>Mimi</p>
        <p>Snow</p>
      </div>
      <div class="mutual-friends">
        <img class="prof-picture" src="Exercícios/dog.jpg">
      </div>

      <div class="mutual-friends">
        <img class="prof-picture" src="Exercícios/dog.jpg">
      </div>

      <div class="mutual-friends">
        <img class="prof-picture" src="Exercícios/dog.jpg">
      </div>
    </div>
  </div>
</body>
Tags:

2

Answers


  1. 0

    In your code, you applied the grid for all the divs and that broke the whole structure. Ideally you should wrap your elements to make easier to to align . I took the liberty of changing the images. To make it easier to view. If you want the name and profile pictures together on the same line, you will need to change the position of the names. Hope this helps.

    p {
  font-family: Arial;
  font-weight: bold;
  color: rgb(71, 71, 71);
  font-size: 16px;
}

div.wrapper{
  margin-top: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  column-gap: 124px;
}
div.mutual-friends .names{  
      display: grid;
      grid-template-columns: 100px 100px 100px;
      column-gap: 124px;
  }

.cat img{
  width: 200px;
  height: 200px;
  object-fit: cover;
}    

.prof-picture img{
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  margin-top: 15px;
}
.div.mutual-friends .names p {
  margin: 0px;
}
    <body>

  <div class='wrapper'>
    <div class='cat'>
      <img src="https://plus.unsplash.com/premium_photo-1661508614319-b5e40d1143bb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2F0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
    </div>
    <div class="cat">
      <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
    </div>
    <div class="cat">
      <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y2F0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
    </div>
    </div>
    <div class="mutual-friends">
      <div class="names">
        <p>Oliver</p>
        <p>Mimi</p>
        <p>Snow</p>
      </div>
<div class="wrapper">
      <div class="prof-picture">
        <img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZG9nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>

      <div class="prof-picture">
        <img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8ZG9nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>

      <div class="prof-picture">
        <img src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZG9nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    Here’s a few quick changes on top of kröte’s answer:

    • Converted paragraph color to new syntax
    • Removed redundant font size on paragraph, default is already 16px
    • Converted wrapper div margins to logical property
    • Removed unit for margin on .div.mutual-friends .names p as zero values require no unit
    • Convert grid columns to repeat function syntax
    • Move hardcoded column values to custom property on document
    • Merge duplicate CSS for wrapper and mutual friends names

    Your homework:

    • Move all of the column creating code to a min-width media query, and make the columns stack by default until that breakpoint is reached
    • Consider adapting the markup to have only one grid container rather than three
    :root {
  --column-size: 100px;
}

p {
  font-family: Arial;
  font-weight: bold;
  color: rgb(71 71 71);
}

div.wrapper {
  margin-block: 0;
}

div.wrapper,
div.mutual-friends .names {
  display: grid;
  grid-template-columns: repeat(3, var(--column-size));
  column-gap: 124px;
}

.cat img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.prof-picture img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  margin-top: 15px;
}

.div.mutual-friends .names p {
  margin: 0;
}
    <div class='wrapper'>
  <div class='cat'>
    <img src="https://plus.unsplash.com/premium_photo-1661508614319-b5e40d1143bb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2F0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
  </div>
  <div class="cat">
    <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
  </div>
  <div class="cat">
    <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y2F0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
  </div>
</div>
<div class="mutual-friends">
  <div class="names">
    <p>Oliver</p>
    <p>Mimi</p>
    <p>Snow</p>
  </div>
  <div class="wrapper">
    <div class="prof-picture">
      <img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZG9nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
    </div>

    <div class="prof-picture">
      <img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8ZG9nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
    </div>

    <div class="prof-picture">
      <img src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZG9nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search