CODEWITHSUNDEEP
htmlcsscss-grid
Chattervast
Chattervast

Reputation: 146

Why does the same CSS grid code give different layouts on different pages?

I have the exact same CSS on two pages (minus color changes) but the grid layout is responding differently on each. I tested adding more items and removing some, changing the grid-template-layout, and nothing has worked. I did copy and paste the exact code from the working page to the non-working page and it fixed the problem but I have gone through everything I could think of and there isn't anything I could find that should be making these two pages different.

What I want: 4 columns, same widths.

What I have: 1 page that does this. Other page has the first column large, second column medium, and last columns smaller. When you add columns the largest/medium/smaller column attributes change randomly to other columns.

.the-grid {
  padding-bottom: 20px;
  max-width: 1640px;
  margin: auto;
}

.the-grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 60px;
  -webkit-align-items: top;
  -webkit-box-align: top;
  -ms-flex-align: top;
  align-items: top;
  max-width: 1640px;
  margin: 0 auto 120px;
  position: relative;
}

.item {
  position: relative;
}

.image-cont {
  background-size: cover;
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  background-repeat: no-repeat;
}

.heading-cont {
  background-color: rgb(255, 255, 255);
  text-align: center;
  padding: 30px 20px;
  transition: all 0.15s ease-in-out 0s;
}
<section class="the-grid">
  <div class="the-grid-layout">
    <div class="item">
      <a href="/content-url">
        <div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
        <div class="heading-cont">
          <h5 class="heading">Item Title</h5>
        </div>
      </a>
    </div>
    <div class="item">
      <a href="/content-url">
        <div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
        <div class="heading-cont">
          <h5 class="heading">Item Title</h5>
        </div>
      </a>
    </div>
    <div class="item">
      <a href="/content-url">
        <div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
        <div class="heading-cont">
          <h5 class="heading">Item Title</h5>
        </div>
      </a>
    </div>
    <div class="item">
      <a href="/content-url">
        <div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
        <div class="heading-cont">
          <h5 class="heading">Item Title</h5>
        </div>
      </a>
    </div>
    <div class="item">
      <a href="/content-url">
        <div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
        <div class="heading-cont">
          <h5 class="heading">Item Title</h5>
        </div>
      </a>
    </div>
    <div class="item">
      <a href="/content-url">
        <div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
        <div class="heading-cont">
          <h5 class="heading">Item Title</h5>
        </div>
      </a>
    </div>
  </div>
</section>

Upvotes: 1

Views: 524

Answers (1)

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

The problem with fr is that it takes the available space and will divide it as needed.

If you want to have each part take up exactly 1/4 then use 25% instead of 1fr.

Hope that helps.

PS: don't forget to subtract the gap.

Upvotes: 2

Related Questions