How to display image in css grid

0 votes

I am trying to make a css grid for photos but the img-element doesn't display the image in the grid item. There's nothing wrong with the url I am using since it works on other parts of the page but not in the grid system.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.wrapper > div img {
  max-width: 100%;
  max-height: 100%;
}
<div id="content">
  <div class="wrapper">
    <div><img src="https://placehold.it/100x100" alt=""></div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>

Where am i going wrong?

Jul 18, 2022 in CSS by Edureka
• 13,620 points
1,247 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

How to overlay image with color in CSS?

Use the rgba() Function to Overlay Background ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
633 views
0 votes
0 answers

How to make in CSS an overlay over an image?

I want to add this dark hue, ...READ MORE

Jul 22, 2022 in CSS by Edureka
• 13,620 points
290 views
0 votes
0 answers

How to resize an image in pure HTML/CSS while keeping its proportions?

How can I crop an image while ...READ MORE

Aug 18, 2022 in CSS by Edureka
• 13,620 points
299 views
0 votes
0 answers

How to make a circular image in css?

This is my problem, although I'm really ...READ MORE

Aug 19, 2022 in CSS by Edureka
• 13,620 points
214 views
0 votes
1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
762 views
0 votes
1 answer

How to hide image broken Icon using only CSS/HTML?

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31, 2022 in CSS by Edureka
• 12,690 points
3,435 views
0 votes
1 answer

How do I specify row heights in CSS Grid layout?

Apparently, the auto value on the grid-template-rows property does exactly what ...READ MORE

answered Aug 4, 2022 in CSS by Tanishqa
• 1,170 points
6,237 views
0 votes
1 answer

CSS-only masonry layout

A masonry feature is included in CSS ...READ MORE

answered Aug 8, 2022 in CSS by Tanishqa
• 1,170 points
965 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
9,622 views
0 votes
1 answer

Using/Handling colon inside a JSF generated HTML element ID in CSS selector

Yes, you can.  Just Backslash (\) the colon.  Like ...READ MORE

answered Nov 14, 2018 in Others by DataKing99
• 8,240 points
2,546 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP