Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Grid, grid item "height: 100%" not working in Chrome

Tags:

css

css-grid

This is my first post here... so hopefully I get all of the necessary info in this question.

I've been working all day on trying to get the correct grid functionality on some cards I'm creating (see links to screenshots below). After working a while, I was able to get my desired results in Firefox, but when I test in Chrome... It's not anywhere close to the same as Firefox.

Firefox Results

Firefox Results

Chrome Results

Chrome Results

It seems when I comment out "height: 100%;" on the image the functionality is better in Chrome, but still not what I'm wanting.

Chrome with "height: 100%;" removed:

Chrome with "height: 100%;" removed

Here's my markup:

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
  grid-gap: 7rem;
  &__item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  &__img {
    width: 100%;
    height: 100%;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    display: block;
    object-position: center;
    object-fit: cover;
  }
}
<section class="projects">
  <div class="projects__item projects__item--1">
    <img src="img/projects-1.png" class="projects__img">
    <div class="projects__content">
      <h3 class="projects__heading--3 heading-3">Project Title</h3>
      <p class="projects__text">
        Insert Text
      </p>
    </div>
  </div>
</section>

Can anyone see where I've gone wrong?

like image 713
Kelsey Harms Avatar asked Jun 05 '18 03:06

Kelsey Harms


People also ask

Does CSS grid work in Chrome?

The supporting browsers Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers.

Is CSS grid fully supported?

Intro. Most developers are afraid to start using CSS Grid because of browser support, but CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari, Edge including their mobile versions.

How do I fix the size of the grid?

By default, a grid item cannot be smaller than the size of its content. Grid items have an initial size of min-width: auto and min-height: auto . You can override this behavior by setting grid items to min-width: 0 , min-height: 0 or overflow with any value other than visible .


2 Answers

So basically what Is happening is there is no height given to the parent container projects so when you say 100% height on the image it doesn't actually know what you mean, height of what??

So to fix it you will need to add a height to your parent container projects, now you can set that to be whatever you like but if you want it to be 100% of the screen height you have to use height: 100vh

edit

On further inspection it looks as if you want all the images to line up the same way as well so what you will have to do is remove your image tag and create a div like so..

<div class="img_container">
</div>

then in your css

.img_container{
    height: 50%; // or whatever value just make sure you give your parent a height
    width: 100%;
    background: url('link to your image') 50% no-repeat;
    background-size: cover;
 }

what this does is creates a container that holds the image and then fits the image to the container so all your images look the same width and height, now you will have to play around with it for a bit but this should give you what you want

like image 158
Smokey Dawson Avatar answered Nov 15 '22 22:11

Smokey Dawson


I had the same error , I managed to solve it.

HTML ERROR ->
<div class="container-grid">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>

The solution

HTML

<div class="container-grid">
    <div class="image"><img src="1.jpg" /></div>
    <div class="image"><img src="2.jpg" /></div>
    <div class="image"><img src="3.jpg" /></div>
</div>

IN YOUR CSS
.galeria .image {
  height: 100%;
  width: 100%;
}
.galeria .image img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
}
like image 28
Carlos Terrazas Avatar answered Nov 15 '22 23:11

Carlos Terrazas