Grid items taking extra height

HTML & CSS
1

Hi there,

I have the following grid, but for some reason the two boxes on the left are adding extra space below, making them taller than what they should be and the ones on the right.

This is a fiddle:

Does anyone know what would cause this?

Thanks!

2

It’s most likely your height:100% in three places that is causing the issue. You don’t need heights on grid items to equalise columns if you have the proper structure.

Unfortunately js fiddle doesn’t work well on a mobile so I can’t really test until I get access to a computer tomorrow :slight_smile:

3

Yes as I expected the height:100% are increasing the height by 100% which means they are 100% plus whatever is above it making them too big. Avoid height:100% in most cases.

If you remove the three height:100% from your code and remove the bottom collapsing margin on the h3 then all columns are equal.

/

**********************************************
NEWS
**********************************************/
.news {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

.news-box:nth-of-type(1),
.news-box:nth-of-type(2) {
  grid-row: 1 / 3;
}

.news-box time {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
}

.news-box .news-image img {
  max-width: 100%;
  height: auto;
}

.news-box h3 {
  font-size: 26px;
  line-height: 32px;
  font-weight: 300;
}

.news-box h3 a {
  color: #062238;
}

.news-box {
  background: #f1f1f1;
  /* height: 100%;*/
}

.news-box:nth-last-of-type(6) .category-news,
.news-box:nth-last-of-type(5) .category-news {
  background: #062238;
  /*height: 100%;*/
}

.news-box:nth-last-of-type(6) .category-news h3 a,
.news-box:nth-last-of-type(5) .category-news h3 a {
  color: #fff;
}

.news-box:nth-last-of-type(6) .category-competitions,
.news-box:nth-last-of-type(5) .category-competitions {
  background: #ffba45;
  /* height: 100%;*/
}
.news-box h3 {
  margin-bottom: 0;
  padding-bottom: 1rem;
}
3 Likes
4

Thanks, that worked perfectly.

So if I have an element set to 100%, it could duplicate that 100% somewhere in a way?

5

I think i know why I added the 100% - if I add some padding to each of the boxes holding the text, it then creates space below on the two left boxes where these should be the solid colour all the way down.

This is the updated fiddle:

Is there another way to achieve this?

Thanks!

6

I think you’re going to have to jump an extra hoop and add flex to the new-box class

so

.news-box {
    background: #F1F1F1;
    outline: 1px solid red;    /* added for testing purposes */
    display: flex;
    flex-direction: column;
}

and

.category-competitions, .category-news {
    padding: 20px;
    flex-grow: 1;
}
2 Likes
7

That’s awesome, thanks! I had in my mind for some reason that I would use either flex or grid and not together.:slight_smile:

2 Likes
8

No they were made to mix and match as they do different things (and in some cases the same things).

Grid basically aligns rows and columns but flex is more one dimensional and essentially aligns in one direction at a time (unless you force the issue).

You can mix and match depending on your need. :slight_smile:

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.